执行上下文和闭包

Question

我知道如何实现闭包，但我很难理解为什么会发生闭包。例如：

function foo(){
    var a = 4;
    return function innerFoo(){
        alert(a);
    };
};
var bar = foo();
bar();                   // alerts 4

当我看到上面的代码时，我知道会发生什么，但是当我试图从逻辑上遵循它时，它没有任何意义。我认为我对执行上下文及其范围链的理解是错误的。

这就是我期望的程序运行:

function foo(){
    var a = 4;
    return function innerFoo(){
        alert(a);
    };
};

var bar = foo(); // function foo() is executed, creating a foo execution context(EC)
                 // fooEC = {scopeChain: [fooEV.VO, globalEC.VO],
                 //                  VO: {innerFoo: pointer to innerFoo(),
                 //                              a: 4}};

                 // So, the pointer to innerFoo() is returned to bar
                 // fooEC is exited
bar(); // bar points to code in innerFoo(), creates a innerFoo execution context
       // innerFooEC = {scopeChain: [innerFoo.VO, globalEC.VO],
       //                       VO: { }};

       // interpreter searches innerFooEC.VO for variable "a", none found, looks
       // down the scope chain at the global variable object,
       // globalEC = {scopeChain: [globalEC.VO],
       //                     VO: {foo: pointer to foo(),
       //                          bar: pointer to innerFoo()}};  
       // a is undefined

我哪里错了？

Answer 1

错误在

bar points to code in innerFoo()

闭包不仅仅是一个指向代码的指针，它还是一个指向代码的指针加上一个环境；那是定义 a 的环境。

当你执行闭包时，范围链是定义闭包时（即在foo内）处于活动状态的范围链，而不是调用的范围链制作完成。

请注意，闭包捕获变量，而不是值。这可以通过以下方式观察：

function getset(x) {
    var a = x;
    function getter() { return a; }
    function setter(x) { a = x; }
    return [getter, setter];
}

var gs1 = getset(12);
var gs2 = getset(34);

console.log(gs1[0]()); // --> 12
console.log(gs2[0]()); // --> 34
gs1[1](1122);
gs2[1](3344);
console.log(gs1[0]()); // --> 1122
console.log(gs2[0]()); // --> 3344

即每对 getter/setter 将在两个闭包之间共享自己的变量，但与另一对分开。

根据我的经验，这是在循环中创建闭包时最常犯的错误的来源：

for (var i=0; i<10; i++) {
    var node = document.createElement("div");
    node.textContent = "click me (" + i + ")";
    node.onclick = function() { alert(i); };
    document.body.appendChild(node);
}

在此代码中，单击所有 10 个元素时，将显示 相同的数字 (10)，因为所有闭包都共享相同的 i 变量在循环中，10 是变量的最终值。

执行上下文和闭包

Execution context and closures

javascript

closures