Question

如果我像这样调用函数once

var button = document.querySelector('button');

button.addEventListener('click', once);

function once() {
  console.log('one');

  button.removeEventListener('click', once);
}

它只召唤一次。

但如果我这样打电话once()

var button = document.querySelector('button');

button.addEventListener('click', once());

function once() {
  console.log('one');

  button.removeEventListener('click', once());
}

异常抛出

异常：InternalError：过多的递归

请你解释一下为什么会这样。

Answer 1

函数名称调用后的

()函数。因此，button.addEventListener('click', once());绑定未定义的once()方法的返回值。

由于once()是递归调用的，没有任何break语句，因此你得到了InternalError: too much recursion。

您应该传递函数参考。

button.addEventListener('click', once);

其他信息：

Pointer Vs Delegates

Answer 2

如果您将()放在包含某个功能的变量名称后面，那么调用该功能。

如果一个函数调用自身，那么它将被调用，调用自身，再次调用自身，等等到无穷大。这是递归。做一些无限的事情会导致计算机内存不足，所以这是不可取的。

JavaScript引擎通过在您尝试时抛出异常来防止这种情况。

（当然，有一些例外，一个自称有条件的函数可以是very useful）。

Answer 3

第一个代码是正确的，因为你注册了要调用的函数。

第二个代码尝试注册函数调用once()的结果。这意味着当您只想注册它时实际执行该功能。现在，在您的函数体中，您也可以取消注释回调。在这里，你再次调用你正在执行的函数，因此，你无限地递归。

JS递归函数调用

3 个答案: