时间戳

首页 > 解决方案 > 当用户单击“按钮 4”时，控制台会记录什么内容，为什么？

object - 当用户单击“按钮 4”时，控制台会记录什么内容，为什么？

问题描述

考虑以下代码片段：

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i);});
  document.body.appendChild(btn);
}

标签： objectvariablesscopeexecutioncontext

解决方案

好吧，无论用户单击什么按钮，该数字5都将始终记录到控制台。

这是因为，在调用该onclick方法时（对于任何按钮），for 循环已经完成并且变量i的值已经是5.

奖励点，你可以阅读更多关于执行上下文、变量对象、激活对象和内部“范围”属性的信息，这有助于闭包行为。你会在这里理解魔法。

推荐阅读