JavaScript for循环初始化、条件、后续操作机制及代码异常解析

先看你给出的代码：

for (
  let i = 0, getI = () => i, incrementI = () => i++;
  getI() < 3;
  incrementI()
) {
  console.log(i);
}
// Logs 0, 0, 0

核心原因 #

这段代码的关键在于for循环中let变量的绑定规则，以及箭头函数的闭包特性：

1. 初始化块let i = 0, getI = () => i, incrementI = () => i++;只执行一次，在循环开始前就创建了三个绑定：i（初始值0）、getI、incrementI。后两个箭头函数会捕获这个初始化时的i变量，之后所有调用都会操作这个i。
2. for循环中，用let在初始化块声明的变量，每次迭代都会创建一个新的i变量，新变量的初始值继承自上一次迭代的i变量的值。但你代码里的增量块incrementI()操作的是初始化时的旧i，而非每次迭代的新i。

逐次迭代拆解 #

• 第一次迭代

  1. 条件判断：调用getI()返回初始化时的i值0，满足<3，进入循环体。
  2. 循环体：console.log(i)输出的是本次迭代的新i变量，初始值为0。
  3. 增量操作：调用incrementI()，初始化时的i执行i++，值变为1（后置递增先返回旧值，再自增）。

• 第二次迭代

  1. 创建新的i变量，初始值继承上一次迭代的i值（0）。
  2. 条件判断：getI()返回初始化时的i值1，满足<3。
  3. 循环体：输出本次新i的值0。
  4. 增量操作：初始化时的i变为2。

• 第三次迭代

  1. 创建新的i变量，初始值仍为0。
  2. 条件判断：getI()返回初始化时的i值2，满足<3。
  3. 循环体：输出0。
  4. 增量操作：初始化时的i变为3。

• 第四次迭代
  条件判断：getI()返回3，不满足<3，循环结束。

解答你的疑问 #

• console.log执行后是否会创建新的词法作用域？初始的i变量会消失吗？
  console.log不会创建新的词法作用域。初始的i变量不会消失，因为getI和incrementI一直引用着它，直到循环结束后这些函数被回收。

• getI函数会在每次新迭代中重新定义吗？
  不会。初始化块只执行一次，getI和incrementI仅在循环开始前创建一次，后续迭代不会重新定义。

• 是否会创建新的i变量，将旧i的值复制到新i后再对新i进行递增？
  每次迭代确实会创建新的i变量，新i的初始值是上一次迭代的i变量的值，但你代码里的增量操作只修改了初始化时的旧i，没有对新i做任何递增，所以新i始终是0。

• 若生成了带有递增后值的新i，为何console.log(i)仍引用初始值0？
  新i的初始值是上一次迭代的i值（0），你没有在增量块中修改这个新i，而是修改了另一个独立的旧i变量，所以每次循环体里的i都是0。

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