两组JS forEach循环代码差异：为何传统普通函数表达式无法正常运行？

两组代码的核心差异是this指向规则不同，第一组普通函数版本的this不符合逻辑预期，所以无法正常运行。

第一组代码（普通函数版本，运行异常） #

遍历所有元素

checkboxes.forEach( function (checkbox){
    console.log(checkbox);

    if( checkbox === this || checkbox === lastChecked)
    {
        inBetween = !inBetween;
        console.log(" start checking them inbetween");

    }

    if(inBetween)
    {
        checkbox.checked = true;
    }
});

第二组代码（箭头函数版本，运行正常） #

遍历所有元素

checkboxes.forEach(checkbox => {

  console.log(checkbox);
  if (checkbox === this || checkbox === lastChecked) {
    inBetween = !inBetween;
    console.log('Starting to check them in between!');
  }

  if (inBetween) {
    checkbox.checked = true;
  }
});

具体差异说明 #

• 普通函数有独立的this绑定，它的this是运行时决定的：作为参数传给forEach的普通匿名函数，运行时内部的this默认指向全局对象（浏览器环境为window，严格模式下是undefined），完全不是预期的「触发本次逻辑的点击事件对应的复选框元素」，所以判断条件checkbox === this永远不成立，功能自然失效。
  如果要让普通函数版本正常运行，可以给forEach传入第二个参数绑定this即可：

  checkboxes.forEach(function(checkbox) {
    // 原有逻辑不变
  }, this) // 此处传入外层作用域的this完成绑定
  

• 箭头函数没有自己的this，它内部的this直接继承自外层作用域的this，也就是这段逻辑所在上下文的this（通常是复选框点击事件处理函数的this，也就是被点击的复选框元素），完全符合代码的逻辑预期，所以第二组可以正常运行。

内容的提问来源于stack exchange，提问作者Starlove