用括号调用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() 中，事件将绑定到 func 的 return 值 。

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

如果 func 碰巧 return 一个函数，那么你可以使用 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

Answer 2

（评论太长了。）

如果你真的想弄乱自己的脑袋：

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

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

这会如您所愿，但可能不会为什么您希望如此。

Answer 3

使用

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

相当于print返回的值（但是没有返回值，所以是undefined）

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

当调用 onclick 事件处理程序时，它会调用指定的值并期待一个函数。 undefined() 也会给你同样的错误。 print() 会如您所愿，这就是为什么当您使用它时它会起作用的原因

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

Answer 4

函数就像任何其他变量一样，除了它有一个额外的运算符：

就像对象和数组一样，您可以使用点和方括号运算符来检索它们的属性，您可以使用调用运算符来调用函数，但该函数仍然是一个变量。

function a() {
    console.log("potato");
}
var b = a;
b() //prints "potato" on the console

在你的例子中，单独使用 print 函数（没有调用运算符什么也没做，但这与你自己写一个数字是一样的：结果是值本身!

console.log(a); //prints function a()
console.log(42); //prints 42

当您在自己的行中键入某物时，它只是将 return 那个值赋给表达式，但如果不做任何事情，什么也不会发生：

a; //nothing happens
42; //nothing happens

现在，当您使用调用运算符时，它运行是您的函数，表达式的值是函数 returned 的任何值，或者 undefined 如果它没有 return任何东西。

function doStuff() {
    return "potato";
}

现在假设你有这个表达式：

console.log(doStuff());

它将运行 doStuff 和 return 转换为表达式：

console.log("potato");

然后它会运行 console.log，以"potato"作为它的参数，它会施展魔法在控制台上显示。

事件就是这样，将函数保存到变量中以备后用：

function doom() {
    return Infinity / 0;
}

onDoomsday = doom;

//somewhere else in your code:

onDoomsday(); //destroys the world

Answer 5

你必须将一个函数的引用绑定到 onclick 但在第一种情况下你实际上除了调用一个函数之外什么都不做:

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

它实际上会调用函数 print() 并且由于函数在 return 中没有任何内容，所以它不会影响 element1 的点击事件。

另一方面 document.getElementById('element1').onclick = print;

为了使第一个案例正常工作，您需要 return 一个函数以便在事件发生时调用它：

var print = function() {
  // when this will invoke it will return function
  return function() {
    console.log("Hello");
  };
};

将函数引用分配给 onclick 事件，并在每次单击事件时调用该函数。

用括号调用JS函数

Call JS function with brackets

javascript

jquery

function