JavaScript中var与let声明变量导致点击元素结果差异的原因咨询

云原生阿岚

2026-7-17

问题原因解析：var与let在事件绑定中的作用域差异

为什么var会只输出最后一个元素

用var声明的变量属于函数作用域（若不在函数内则为全局作用域），在循环中使用var时，整个循环只会创建一个变量绑定。所有点击事件的回调函数都会共享这个变量的引用——当你触发点击事件时，循环早已执行完毕，变量的值已经被更新为循环的最后一个元素，因此所有点击操作都会输出最后一个元素的内容。

为什么let能正确获取每次点击的元素

let是ES6新增的变量声明方式，属于块级作用域。在循环中使用let时，每次循环迭代都会创建一个新的独立变量绑定，每个点击事件的回调函数都会捕获当前迭代的那个变量。这样当你点击对应元素时，回调函数引用的是当时循环迭代的元素，自然能正确输出对应内容。

示例代码对比

使用var的错误示例

const items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  item.onclick = function() {
    console.log('点击的元素：', item);
  };
}

使用let的正确示例

const items = document.querySelectorAll('.item');
for (let i = 0; i < items.length; i++) {
  let item = items[i];
  item.onclick = function() {
    console.log('点击的元素：', item);
  };
}