对JavaScript中闭包的理解

闭包

匿名函数经常被误认为是闭包。闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。

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”。