闭包
匿名函数经常被误认为是闭包。闭包指的是那些引用了另一个函数作用域中变量的函数,通常是在嵌套函数中实现的。
function test(name) {
return function(obj1, obj2) {
let val1 = obj1[name];
let val2 = obj2[name];
if(val1 < val2) {
return -1;
} else if(val1 > val2) {
return 1;
} else {
return 0;
}
}
}
上面第三四行代码位于内部函数(匿名函数)中,其中引用了外部函数的变量name。在这个内部函数被返回并在其他地方被使用后,它仍然应用者这个变量,这是因为内部函数的作用域链包含test()函数的作用域。
在调用一个函数时,会为这个函数调用创建一个执行上下文,并创建一个作用域链,然后用arguments和其他命名参数来初始化这个函数的活动对象。外部函数的活动对象是内部函数作用域链上的第二个对象,这个作用域链一直向外串起了所有包含函数的活动对象,直到全局执行上下文才终止。
一、了解作用域链
在函数执行时,要从作用域链中查找变量,以便读、写值。
看以下代码:
function compare(val1, val2) {
if(val1 < val2) {
return -1;
} else if(val1 > val2) {
return 1;
} else {
return 0;
}
}
let res = compare(5, 10);
这里定义的compare()函数时全局上下文中调用的。第一次调用compare()时,会为它创建一个包含arguments、val1和val2的活动对象,这个对象是其作用于链上的第一个对象。而全局上下文的变量则是compare()作用域链上的第二个对象,其中包含this、res和compare。
函数执行时,每个执行上下文中都会有一个包含其中变量的对象。全局上下文中的交变量对象,它会在代码执行期间始终存在,而函数局部上下文中的叫活动对象,只在函数执行期间存在。在定义compare()函数时,就会为它创建作用域链,预加载全局变量对象,并保存在内部的[[Scope]]中。在调用这个函数时,会创建相应的执行上下文,然后通过复制函数的[[Scope]]来创建其作用域链,接着会创建函数的活动对象(用作变量对象)并将其推入作用域链的前端。
函数内部的代码在访问变量时,会使用给定的名称从作用域链中查找变量,函数执行完毕后,局部活动对象会被销毁,内存中就只剩下全局作用域。不过,闭包就不一样了。
在一个函数内部定义的函数,会把其包含函数的活动对象添加到自己的作用域链中。因此,在test()函数中,匿名函数的作用域链中实际上包含test()的活动对象。
function test(name) {
return function(obj1, obj2) {
let val1 = obj1[name];
let val2 = obj2[name];
if(val1 < val2) {
return -1;
} else if(val1 > val2) {
return 1;
} else {
return 0;
}
}
}
let compareVal = test('name');
let res = compare({name: 'Sean'}, {name: 'bobo'});
console.log(res); // -1
以上代码中,创建的比较函数被保存在变量compareVal中,把compareVal设置为null会解除对函数的引用,从而让垃圾回收程序可以将内存释放掉,作用域链也会被销毁,其他作用域(除全局作用域之外)也可以被销毁。
闭包会保留它们包含函数的作用域,所以比其他函数更占用内存,过度使用闭包可能导致内存过渡占用。
二、this对象
- 如果内部函数没有使用箭头函数定义,则this对象会在运行时绑定到执行函数的上下文。
- 如果在全局函数中调用,则this在非严格模式下等于Window,在严格模式下等于undefined。
- 如果作为某个对象的方法调用,则this等于这个对象。
- 匿名函数不会绑定到某个对象,this会指向Window,除非在严格模式下this是undefined。
window.identity = 'The Window';
let obj = {
identity: 'My object',
getIdenFunc() {
return function() {
return this.identity;
};
}
}
console.log(obj.getIdenFunc()()); // The Window
看以上代码
首先创建了一个全局变量identity,之后又创建了一个包含identity属性的对象,这个对象还包含一个getIdenFunc()方法,返回一个匿名函数,这个匿名函数返回
this.identity
。
因为getIdenFunc()返回函数,所以obj.getIdenFunc()()会立即调用这个返回的函数,从而得到一个字符串。
可是,此时返回的字符串是“The Window”,即全局变量identity的值,为什么不是“My object”呢?
每个函数在调用时都会自动创建两个特殊变量:this和arguments。内部函数永远不可能直接访问外部函数的这两个变量。但是,如果把this保存到闭包可以访问的另一个变量中,则是行得通的。
比如:
window.identity = 'The Window';
let obj = {
identity: 'My object',
getIdenFunc() {
let that = this;
return function() {
return that.identity;
};
}
}
console.log(obj.getIdenFunc()()); // My object
在定义匿名函数之前,先把外部的this保存到变量that中,然后定义闭包时,就可以让它访问that,因为这是包含函数中名称没有任何冲突的一个变量,即使在外部函数返回之后,that仍然指向obj,所以调用obj.getIdenFunc()()会返回“My object”。