JavaScript closure的一个问题 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function f1() {　　　　
    var n = 999;　　　　
    nAdd = function() {
        n += 1
    }　　　　
    function f2() {　　　　　　
        alert(n);　　　　
    }　　　　
    return f2;　　
}　　
var result1 = f1();
var result2 = f1();
var result3 = f1();　　
nAdd();
result1();  //999
result2(); //999
result3(); //1000

以上是困惑的问题？为什么nAdd（）影响最近的闭包。
stackoverflow的两个答案，合起来能很好的理解这个问题。

1.进一步明白细节的回答

It has to do with when nAdd is assigned the function. Note that when you create a closure, a new “copy” (for lack of a better word) of the local variables are created. Thus, result1’s n is different from result2s n which is different from result3’s n. They are seperate, and each closure cannot access another closure’s n.

Look at this line:

1
2
3
nAdd = function() {
     n += 1;
}

This assigns nAdd a new closure each time. Each time, this closure will only affect the most recent “copy” of n.

So when you are doing.

1
2
3
var result1 = f1(); // assign nAdd for the first time, referring to result1's n.
var result2 = f1(); // re-assign nAdd, now it affects result2's n.
var result3 = f1(); // re-assign nAdd, now it affect result3's n.

nAdd got assigned a new closure each time. The last time, nAdd got assigned a closure with result3’s copy of n.

Thus, when you do nAdd(), you only increment result3’s n.

Here’s an example that might clear things up.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function f1() {　　　　
    var n = 999;　　　　
    nAdd = function() {
        n += 1
    }　　　　
    function f2() {　　　　　　
        alert(n);　　　　
    }　　　　
    return f2;　　
}　　
var result1 = f1();
var nAdd1 = nAdd;
var result2 = f1();
var nAdd2 = nAdd;
var result3 = f1();　　
var nAdd3 = nAdd;
nAdd3();
result1();  //999
result2(); //999
result3(); //1000
nAdd1();
result1(); // 1000
nAdd1();
result1(); // 1001
nAdd2();
result2(); // 1000
nAdd();
result3(); // 1001 (the most recent nAdd result3's n).

To further elaborate, consider what would happen if you did this instead:

1
2
3
4
5
6
7
8
var result1 = f1();
nAdd();
var result2 = f1();
var result3 = f1();　
result1(); // 1000
result2(); // 999
result3(); //999

Or this:

1
2
3
4
5
6
7
8
var result1 = f1();
var result2 = f1();
nAdd();
var result3 = f1();　
result1(); // 999
result2(); // 1000
result3(); // 999

It becomes obvious that nAdd updates only the most recent invocation’s n.!

2.调用本质的回答

First, you need to be clear about the following thing:

nAdd is a global scoped function. But it is using a local scoped variable n.

Every time you re-create f1(), the pointer of nAdd function will change.

Finally it will changed to the closest f1() closure and the n variable inside nAdd function will also point to the closest f1() closure. So it can only change the value of the closest one.