闭包 - Githubissues

闭包是一个非常抽象的概念

先看定义：《JavaScript 权威指南》：函数对象本身和这个函数关联的作用域链的结合 mdn: 闭包是指函数有自由独立的变量。换句话说，定义在闭包中的函数可以“记忆”它创建时候的环境。 JavaScript 秘密花园：当前作用域总是能够访问外部作用域中的变量。因为函数是 JavaScript 中唯一拥有自身作用域的结构（ES 5），因此闭包的创建依赖于函数

basic closure

function A(){
    function B(){
       console.log("Hello Closure!");
    }
    return B;
}
var c = A();
c();//Hello Closure!

上面的代码翻译成自然语言

(1)定义了一个普通函数A   (2)在A中定义了普通函数B   (3)在A中返回B（确切的讲，在A中返回B的引用）   (4)执行A(),把A的返回结果赋值给变量 c   (5)执行 c()

把这5步操作总结成一句扯淡的话就是：函数A的内部函数B被函数A外的一个变量 c 引用，然后可以得出定义：当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包。

闭包的作用

我们先了解一下 JavaScript中的 GC 机制：在 JavaScript中，如果一个对象不再被引用，那么这个对象就会被 GC 回收，否则这个对象一直会保存在内存中。

B 定义在 A 中，因此 B 依赖于 A,而外部变量 c 又引用了B, 所以 A 间接的被 c 引用，也就是说，A 不会被 GC 回收，会一直保存在内存中。

function A(){
    var count = 0;
    function B(){
       count ++;
       console.log(count);
    }
    return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

count 是 A 中的一个变量，它的值在 B 中被改变，函数 B 每执行一次，count 的值就在原来的基础上累加 1。因此，A 中的 count一直保存在内存中。

这就是闭包的作用，有时候我们需要一个模块中定义这样一个变量：希望这个变量一直保存在内存中但又不会“污染”全局的变量，这个时候，我们就可以用闭包来定义这个模块

高级写法

在大型应用中的写法

(function(document){
    var viewport;
    var obj = {
        init:function(id){
           viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
})(document);

这个组件的作用是：初始化一个容器，然后可以给这个容器添加子容器，也可以移除一个容器，貌似一看是一个立即执行函数。

这段匿名执行函数可以分解如下

var f = function(document){
    var viewport;  // viewport 不会被 GC 回收，一直被 obj 引用，而 obj 又被定义在了 window
    var obj = {
        init:function(id){
            viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
};
f(document);

在这段代码中似乎看到了闭包的影子，但 f 中没有任何返回值，似乎不具备闭包的条件，注意这句代码：

window.jView = obj;

obj 是在匿名函数 f 中定义的一个对象，这个对象中定义了一系列方法，执行window.jView = obj 就是在 window 全局对象定义了一个变量 jView，并将这个变量指向 obj 对象，即全局变量 jView 引用了 obj . 而 obj 对象中的函数又引用了 f 中的变量 viewport ,因此 f 中的 viewport 不会被GC回收，会一直保存到内存中，所以这种写法满足闭包的条件。

常见错误

在循环中创建闭包

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i); // (creating a closure)
  };
}
a[6](); // 10

for 循环内的匿名函数表达式保持了对外部变量 i 的引用（闭包），此时循环已经结束，i 的值被修改为 10

// ES5 解决方法

function iteratorFactory(i) {
    return function () {
        console.log(i) // 每次循环时创建变量 i 的拷贝
    }
}

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = iteratorFactory(i)
}
a[6](); // 6
a[7](); // 6
console.log(a);

方法二：

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = (function (index) {
//      console.log(i)
        return function () {
            console.log(index) // 每次循环时创建变量 i 的拷贝 index
        }
    })(i)  // i 作为参数传给了 index
}
a[6](); // 6
a[7](); // 6
console.log(a);

可以看到，(function () { ... })() 的形式，就是上文提到的函数的自执行，i 作为参数传给了 index，console 再次执行时，它就拥有了对 index 的引用，此时这个值是不会被循环改变的

方法三

var a = [];
for (var i = 0; i < 10; i++) {
    (function (index) {  // 形式参数相当于局部变量
//      a[index] = console.log(index)
        a[index] = function () {
            console.log(index) // 函数内部引用外部局部变量
        }
    })(i)
}
a[6](); // 6
a[7](); // 6
console.log(a);

总结

这是对闭包最简单的理解，当然闭包还有其更深层次的理解，这个就涉及的多了，你需要了解 JS 的执行环境 (execution context)、活动对象 (activation object) 以及作用域(scope) 和作用域链 (scope chain) 的运行机制。

参考文章：让你分分钟学会 JS 闭包 JavaScript 中的一些坑（一）

liujsim / blog

闭包 #3

basic closure

闭包的作用

高级写法

常见错误

总结