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);

Answer 2

如果我们为匿名函数使用（丑陋）名称，则可以将代码重写为：

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

保留类似语义的更详细代码将是：

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

var incrementAndAlert = makeIncrementer(); // function() { alert(++number); }

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

makeIncrementer是一个函数，在调用时，在其范围内定义一个number变量，并返回一个函数 - 注意makeIncrementer不会递增，也不会提醒number变量，而是返回另一个执行此操作的函数。

现在incrementAndAlert绑定到此返回的函数

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

捕获makeIncrementer的{{1}}变量，该变量使其能够number在number调用触发incrementAndAlert之间保持状态点击。

Answer 3

这不是＆＃34;答案＆＃34;，但希望它会显示一种不同的方式来查看问题。

首先，请注意JavaScript函数只是对象，因此只是可以绑定到变量的值。因此，

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

可以通过简单的表达式替换重写为

var f = function () { 
    var number = 0;
    return function () {
        alert(++number);
    };
};
// $('div').click((f)()); and when removing extra parenthesis ->
$('div').click(f());

然后，再进行一次简单的表达式替换

var g = f()
$('div').click(g);

应该清楚的是，首先调用（外部）函数f，它是用作处理程序的结果（内部函数）值g。

除了引入变量之外，上述替换在语义上等同于原始代码。

不了解Javascript中的范围

3 个答案: