前端js——JavaScript闭包
JavaScript闭包
- 闭包就是子函数可以有权访问父函数的变量、父函数的父函数的变量、一直到全局变量。归根结底,就是利用js的词法(静态)作用域,即作用域链在函数创建的时候就确定了。
- 子函数如果不被销毁,整条作用域链上的变量仍然保存在内存中。
为什么引入闭包的概念（《深入理解JavaScript系列:闭包(Closures)》详细见这里）
function testFn() {
var localVar = 10; // 自由变量
function innerFn(innerParam) {
console.log(innerParam + localVar);
}
return innerFn;
}
var someFn = testFn();
someFn(20); // 30一般来说，在函数执行完毕之后，局部变量对象即被销毁，所以innerFn是不可能以返回值形式返回的，innerFn函数作为局部变量应该被销毁才对。
这是当函数以返回值时的问题，另外再看一个当函数以参数形式使用时的问题
var z = 10;
function foo() {
alert(z);
}
foo(); // 10 – 使用静态和动态作用域的时候
(function () {
var z = 20;
foo(); // 10 – 使用静态作用域, 20 – 使用动态作用域
})();
// 将foo作为参数的时候是一样的
(function (funArg) {
var z = 30;
funArg(); // 10 – 静态作用域, 30 – 动态作用域
})(foo);当函数foo在不同函数中调用，z该取哪个上下文中的值呢，这就又是一个问题，所以就引入了闭包的概念，也可以理解为定义了一种规则。
函数以参数形式使用
sort
在sort的内置方法中，函数以参数形式传入回调函数，在sort的实现中调用：
[1, 2, 3].sort(function (a, b) {
... // 排序条件
});map
和sort的实现一样
[1, 2, 3].map(function (element) {
return element * 2;
}); // [2, 4, 6]另外利用自执行匿名函数创建的闭包
var foo = {};
// 初始化
(function (object) {
var x = 10;
object.getX = function() {
return x;
};
})(foo);
alert(foo.getX()); // 获得闭包 "x" – 10利用闭包实现私有属性的存取
var fnBox = [];
function foo() {
for(var i = 0; i < 3; i++) {
fnBox[i] = function() {
return i;
}
}
}
foo();
var fn0 = fnBox[0];
var fn1 = fnBox[1];
var fn2 = fnBox[2];
console.log(fn0()); // 3
console.log(fn1()); // 3
console.log(fn2()); // 3用伪代码来说明如下：
fn0.[[scope]]= {
// 其他变量对象,一直到全局变量对象
父级上下文中的活动对象AO: [data: [...], i: 3]
}
fn1.[[scope]]= {
// 其他变量对象,一直到全局变量对象
父级上下文中的活动对象AO: [data: [...], i: 3]
}
fn2.[[scope]]= {
// 其他变量对象,一直到全局变量对象
父级上下文中的活动对象AO: [data: [...], i: 3],
}分析：
这是因为fn0，fn1，fn2的作用域链共享foo的活动对象，而且js没有块级作用域，当函数foo执行完毕的时候foo的活动对象中i的值已经变为3，当fn0，fn1，fn2执行的时候，其最顶层的作用域没有i的变量，就沿用着作用域链查找foo的活动对象中的i所以i都为3。
但这种结果往往不是我们想要的，这时就可以利用认为创建一个闭包来解决这个问题，如下：
var fnBox = [];
function foo() {
for(var i = 0; i < 3; i++) {
fnBox[i] = (function(num) {
return function() {
return num;
}
})(i);
}
}
foo();
var fn0 = fnBox[0];
var fn1 = fnBox[1];
var fn2 = fnBox[2];
console.log(fn0()); // 0
console.log(fn1()); // 1
console.log(fn2()); // 2用伪代码来说明如下：
fn0.[[scope]]= {
// 其他变量对象,一直到全局变量对象
父级上下文中的活动对象AO: [data: [...], i: 3]
}
fn1.[[scope]]= {
// 其他变量对象,一直到全局变量对象
父级上下文中的活动对象AO: [data: [...], i: 3]
}
fn2.[[scope]]= {
// 其他变量对象,一直到全局变量对象
父级上下文中的活动对象AO: [data: [...], i: 3],
}分析：
当使用自执行匿名函数创建闭包，传入i的值赋值给num，由于作用域链是在函数初始化时创建的，所以当每次循环时，函数fn0、fn1、fn2的作用域链中保存了档次循环是num的值，当fn0、fn1、fn2调用时，是按照本身的作用域链进行查找的。
总结
从理论的角度讲由于js中所有函数都是闭包，但是从应用的角度来说，只有当函数以返回值返回、或者当函数以参数形式使用、或者当函数中自由变量在函数外被引用时，才能成为明确意义上的闭包。