欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端进阶必读:《JavaScript核心技术开发解密》核心提炼二

程序员文章站 2022-03-21 19:39:49
前言最近读勒基本关于前端的数据《JavaScript核心技术开发解密》,《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用,但从未从更深的层面去思考他们是如何运作,为什么会产生这种特性,等等…这本书先从《JavaScript核心技术开发解密》开始讲解,分为两篇讲完,读完本篇你能学到:五、作用域与作用域链在JS中,作用域是用来规定变量/函数可访问的规则5.1作用域5.1.1全局作用域在非严格模式,未定义的变量/函数会...

前言

最近读勒基本关于前端的数据《JavaScript核心技术开发解密》,《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用,但从未从更深的层面去思考他们是如何运作,为什么会产生这种特性,等等…
这本书先从《JavaScript核心技术开发解密》开始讲解,分为两篇讲完,读完本篇你能学到:

前端进阶必读:《JavaScript核心技术开发解密》核心提炼一
前端进阶必读:《JavaScript核心技术开发解密》核心提炼三

五、作用域与作用域链

在JS中,作用域是用来规定变量/函数可访问的规则

5.1作用域

5.1.1全局作用域

在非严格模式,未定义的变量/函数会自动的变成window的属性;
在实践中,尽可能的减少使用全局变量/函数,为了减少协作冲突,提高性能(全局作用域在作用域链的链尾)

5.1.2函数作用域

在ES6之前,es是没有块级作用域的,所以一定是在函数环境中才能生成新作用域

案例:

var arr = [1,2,3];
for(var i = 0; i < arr.length; i++) {
	console.log(i);
}
console.log(i); // 4

5.1.3模拟块级作用域

A: 利用函数产生

var arr = [1,2,3];
// 匿名自执行函数执行会产生函数作用域
(function () {
	for(var i = 0; i < arr.length; i++) {
		console.log(i);
	}
})()
// 匿名自执行函数的几种写法
(function(){})()  // 最常用
*function(){}()
-function(){}()
!function(){}()

重要知识来了:

在ES中,往往通过自执行函数来实现模块化
模块化是非常重要的开发思维

5.2作用域链

scopeChain是当前执行环境的上层执行环境的一系列变量对象组成,串联作用域。
案例:

var a = 20;
function test () {
	var b = a + 10;
	function innerTest () {
		var c = 10;
		return b + c;
	}
	return innerTest;
}
test();

/**
	以上代码innerText的作用域链如下:
	innerTestEC = {
		VO: {...},      // 变量对象
		scopeChain: [VO(innerTest),VO(test),VO(window)], // 好好看这里!
		this: {...}
	}
**/

6、闭包

到了这里,就到了前端是个人都听过的东西了,极其重要的特性!!!

6.1概念

闭包是一种特殊对象
由两部分组成:

  • 执行上下文A
  • 该执行上下文创建的函数B

B执行时,刚问了A中的值,闭包即产生

6.2闭包与垃圾回收机制

正常的上下文运行后,内部的内容都是去了引用而被垃圾回收,但闭包导致A的变量被B持有,阻止了垃圾回授(所以也会导致性能问题)

6.3闭包与作用域链

  • 作用域链在编译中以确定规则,在执行中产生
  • 函数调用栈在执行中才确定

6.4 在chrome开发工具中能够观察函数调用栈,作用域链与闭包

6.5 应用闭包

6.5.1 循环、setTtimeOut与闭包

案例:
利用闭包的知识,修改下面这段代码,让代码的执行结果为隔秒输出1,2,3,4,5

for(var i = 0; i <= 5; i++) {
	setTimeOut(function timer() {
		console.log(i);
	},i * 1000 )
}

利用闭包修改

for(var i = 0; i <= 5; i++) {
	(function (i) {
		setTimeOut(function timer() {
			console.log(i);
		},i * 1000 )
	})(i)
}

或者

for(var i = 0; i <= 5; i++) {
	setTimeOut(function (i) {
		return function timer () {
			console.log(i);
		}
	}(i), i * 1000 )
}

6.5.2单例模式与闭包

在JS中有许多编程思维,其中单例模式时实践中最常用的模式之一,而它的实现与闭包息息相关

七、this

鸡婆一下:来到这个很多人都搞不清楚this指向的问题了,看完这一样相信你会豁然开朗,因为this指向其实比想象中要简单得多。

7.1 this指向

当函数被调用执行时,函数进入创建阶段(前面有讲到),此时会生成变量对象,this确定指向,还做了XXX,随后进入执行阶段。
案例:

var a = 10;
var obj = {
	a : 20
}
function fn () {
	console.log(this.a);
}
fn();   // 10 (方法时一定有调用者的,这里省略是因为在非严格模式下,自动变成window.fn())

fn.call(obj);  // 20  因为fn函数的执行上下文this被修改成obj对象

7.2 call/apply/bind显示绑定this

相信很多人都知道这三个函数的作用,call/apply几乎一样,知只是传参规则不同,bind是先绑定,返回绑定后的方法,未执行。

call apply bind
直接传参 数组传参 直接传参(不立即执行,而是返回修改this后的方法)

ES6中的箭头函数是不能改变this的,使用以上三个方法也不能(先预告,后面会讲到)

八、面向对象

8.1.1

// 构造函数与普通函数并无区别,首字母大写是约定的习惯,new关键字才是将构造方法变得与众不同
var Person = function (name, age) {
	this.name = name;
	this.age = age;
}
Person.protptype.getName = function () {
	return this.name
}

8.1.2 new关键字

下面我们来模拟一边new关键字的作用

function New (constructFunc) {
	// 生命中间对象,最后作为返回的实例,相当于let obj = New(Obj); => obj = res
	var res = {};
	
	if(constructFunc.prototype !== null) {
		// 将实例的原型指向构造函数的原型
		res.__proto__ = constructFunc.prototype;
	}
	
	// ret为该构造函数执行的结果,将构造函数的this改为执行res
	var ret = constructFunc.apply(res, Array.prototype.slice.call(arguments, 1));
	
	// 如果构造函数有返回值,则直接返回
	if((typeof rest === "object" || typeof ret === "function") && ret !== null) {
		return ret;
	}

	// 否则返回该实例
	return res;
} 

总结:

  • 先创建空的、新的实例对象(New(func)返回的对象)
  • 将实例对象的原型指向构造函数的原型
  • 将构造函数的this改为指向实例对象
  • 最后返回该实例对象(如果构造函数本身有返回则直接返回)

8.1.3更简单的原型写法

function Person () {};
Person.prototype.getName = function () {};
Person.prototype.getAge = function () {};

// 简化
Person.prototype = {
	construor : Person,   // 此时Person.protottype指向了新的对象,所以会导致原型对象丢失,所以加上此行
	getName : function () {},
	getAge: function () {},
}

8.1.4实例方法、原型方法、静态方法

function Foo () {
	this.bar = fucntion () {  // 实例方法
		return 'bar in Foo';
	}
}
Foo.bar = function () {return 'static'} // 静态方法
Foo.prototype.bar = function () {return 'prototype'} // 原型方法

本文地址:https://blog.csdn.net/bigname22/article/details/107481087