javascript - 函数语句两边不带括号的 IIFE

Question

在下面的示例中，关于闭包，我看到了这一点:

function addButtons(numButtons) {
  for (var i = 0; i < numButtons; i++) {
    var button = document.createElement('input');
    button.type = 'button';
    button.value = 'Button ' + (i + 1);
    button.onclick = function(buttonIndex) {
      return function() {
        alert('Button ' + (buttonIndex + 1) + ' clicked');
      };
    }(i);
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));
  }
}

window.onload = function() { addButtons(5); };

为什么onclick方法没有定义如下？:

button.onclick = (function(buttonIndex) {
  return function() {
    alert('Button ' + (buttonIndex + 1) + ' clicked');
  };
})(i);

IIFE 不需要以下语法吗:(函数语句)(参数)？

Answer 1

原始代码之所以有效，是因为 IIFE 出现在赋值中，因此赋值的右侧部分确实是一个表达式，这一点毫无疑问。

如果没有赋值，解析器会误解它是函数声明，因此会抛出语法错误，表明声明的函数缺少名称。在这种情况下，必须使用括号才能使其成为 IIFE。

但通常的做法是始终在 IIFE 中包含括号，即使在赋值中使用也是如此。

在您手头的具体情况中，您还可以使用 bind 来指定点击处理程序，它会返回它需要的函数:

button.onclick = function(buttonIndex) {
    alert('Button ' + (buttonIndex + 1) + ' clicked');
}.bind(null, i);