函数作为参数与处理程序 JS

Question

我正在学习 JS 和 JQuery。我想知道为什么这个代码 return 9 on window load?

$(document).ready(function(){
    function foo(a){
        console.log(a *= a);
    };
    $('#btn').click(foo(3));
});

为什么它的功能与标准处理程序不同？

$('#btn').click(function(){
    foo(3);
});

Answer 1

这里实际发生的是两种不同的情况：

想象一下，或者实际打开浏览器的控制台并将这些片段粘贴进去。

好的，所以如果不是 $(elem).click，您有以下函数：

function bar(){
    console.log(parameters);
}

_{parameters 是打印传递给函数的所有参数的关键字。}

此外，假设 foo 看起来像这样：

function foo(a){
    return a * a;
};

_{= 运算符是不必要的，因为 a 无论如何都会立即被丢弃。}

现在，如果我像这样调用 bar 函数：

bar(foo(3));

bar 会 return 9.

因为 foo 在传递给 bar 之前被执行。

鉴于以下内容：

bar(function(){
    foo(3);
});

你会发现 bar 会 return function(){foo(3)}，因为它不是在参数中执行，而是传递函数引用，而 foo(3) 通过函数结果。

假设您希望它在控制台中的按钮上打印 9，您可以这样做：

$(document).ready(function(){
    function foo(a){
        console.log(a *= a);
    };
    $('#btn').click(function(){
        foo(3);
    });
});

function as argument vs handler JS