javascript - 用括号调用JS函数

Question

为了我自己的个人进步，我在摆弄 JS 中的闭包和函数时，发现这种行为让我深感困惑。

获取此函数，将其分配给一个变量，然后通过 jQuery 从两个不同的 HTML 元素调用它:

var print = function(){
console.log("Hello" );
};    

document.getElementById('element1').onclick = print();
document.getElementById('element1').onclick = print;

到底为什么第二个元素(如果单击的话)会正确打印“hello”？
我一直认为你需要在函数名称后面加上括号才能调用它。

事实上，如果我只是单独调用该函数(而不是通过 jQuery 事件)，它就会按预期工作:

var print = function(){
console.log("Hello" );
};    
print; //does nothing
print() //prints "Hello"

我在这里缺少什么？有什么与 jQuery 有关的吗？ 提前致谢!

Answer 1

区别在于调用函数与引用函数。

语法func()立即调用提供的函数。在 element.onclick = func() 中，事件将绑定(bind)到 func 的返回值。

使用element.onclick = func，您不会调用func，只是引用它并将其分配给事件。

如果 func 碰巧返回一个函数，那么您可以使用 element.onclick = func() 语法，这样就可以了你所期望的。

document.getElementById('element1').onclick = print(); // Assigns the *return value* of print
document.getElementById('element1').onclick = print; // Assigns print

function returnPrinter() {
    return function print() {
        // do stuff
    }
}

document.getElementById('element1').onclick = returnPrinter(); // Assigns the return value, which is a function, thus doing what you want