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

不同之处在于调用函数vs对函数进行引用。

语法func()立即调用提供的函数。在element.onclick = func()中，该事件将绑定到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

Answer 2

（评论太久了。）

如果真的想要弄乱自己的头脑：

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

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

这将达到您的期望，但也许不会为什么您期望它。

Answer 3

使用

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

等同于print返回的值（但没有返回值，因此未定义）

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

当调用onclick事件处理程序时，它会调用期望函数的指定值。 undefined()也会给你同样的错误。 print()会做你期望的事情，这就是为什么当你使用它时它会起作用

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

Answer 4

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

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

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

在你的例子中，单独使用print函数（没有调用操作符没有做任何事情，但这与你自己编写一个数字是一样的：结果就是值本身！ / p>

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

当你在自己的行上输入某个东西时，它只是将该值返回到表达式，但没有任何事情可做，没有任何反应：

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

现在，当你使用调用操作符时，它会运行你的函数，而表达式的值是函数return编辑的值，或undefined如果它没有返回任何内容。

function doStuff() {
    return "potato";
}

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

console.log(doStuff());

它将运行doStuff，并返回到表达式：

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()，因为函数没有任何回报，所以它不会影响element1点击事件。

另一方面，

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

为了使第一种情况起作用，你需要返回一个函数，以便可以在事件上调用它：

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

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

用括号调用JS函数

5 个答案: