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是否需要以下语法：(function statement)(arguments)？

Answer 1

您可以使用元素的数据集。例如：

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

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

Answer 2

原始代码有效，因为IIFE出现在赋值中，因此赋值的右边部分确实是表达式没有歧义。

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

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

在您掌握的具体案例中，您还可以将点击处理程序指定为使用bind，它将返回所需的功能：

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

IIFE函数语句周围没有括号

2 个答案: