javascript - 不理解 Javascript 中的作用域

Question

我不太明白这段代码。

$('div').click((function () { 
    var number = 0;
    return function () {
        alert(++number);
    };
})());

我的理解是:

• 定义了一个匿名函数并将其分配给点击处理程序。

• 当我点击 div 时，会调用此函数。

函数的作用是:

• 定义一个变量number = 0

• 返回++number

那么，为什么每次单击时警报中的数字都会增加？ number 不应该在我每次点击时重置为 0 吗？

Answer 1

这里有一个自调用函数，它返回一个函数。注意末尾的括号:

(function () { 
    var number = 0;
    return function () {
        alert(++number);
    };
})()

所以点击处理程序的回调只是返回的内部函数:

function () {
    alert(++number);
};

这个内部函数可以访问外部函数范围内的变量 number。

所以你的代码也可以这样写:

function outerFunction() {
    var number = 0;
    return function () {
        alert(++number);
    };
};

var innerFunction = outerFunction();

$('div').click(innerFunction);