JavaScript执行上下文疑问：for循环相关执行机制咨询

嘿，我来帮你一步步捋清楚这段代码里的执行流程和上下文逻辑，绝对讲得明明白白~

第一步：全局执行上下文的初始化 #

当页面加载这段代码时，首先会创建全局执行上下文，就像咱们打开了一个“全局工作区”：

• 首先会把copyArrayAndMutate、multiplyByTwo这两个函数声明“提前”放到工作区里（函数提升）；const result也会被提升，但不能提前赋值，得等后面执行到才会真正赋值。
• 接着代码从上到下执行：先定义好两个函数，最后执行copyArrayAndMutate([1,2,3], multiplyByTwo)——这时候就会为这个函数调用创建一个专属的函数执行上下文。

第二步：copyArrayAndMutate的函数执行上下文 #

这个函数被调用时，会临时开辟一个新的“小工作间”，流程是这样的：

1. 变量提升准备：
   • 函数里的let output会被提升到当前函数作用域的顶部，但处于“未初始化”状态，不能提前用；
   • for循环里的let i比较特殊，它属于循环块的块级作用域，每次循环都会创建一个新的i绑定，不会和其他循环的i混在一起。
2. 代码执行环节：
   • 先初始化output = []，创建一个空数组；
   • 进入for循环：
     • 第一次循环：初始化i=0，判断0 < 3为true，执行output.push(multiplyByTwo(array[0]))——这时候又会为multiplyByTwo创建一个临时执行上下文；
     • 在multiplyByTwo的上下文里：接收参数input=1，计算1*2=2后返回，这个临时上下文立刻销毁，回到copyArrayAndMutate，把2push到output，现在output是[2]；
     • 执行i++，这里的i是当前循环块的专属绑定，变成1；
     • 第二次循环：判断1 < 3为true，调用multiplyByTwo(2)返回4，push后output变成[2,4]，i变成2；
     • 第三次循环：判断2 < 3为true，调用multiplyByTwo(3)返回6，push后output变成[2,4,6]，i变成3；
     • 第四次判断3 < 3为false，直接退出循环；
   • 最后返回output，把这个值赋值给全局的result，copyArrayAndMutate的临时工作间也随之销毁。

重点提醒：let i在for循环的特性 #

如果这里用的是var i，那整个循环里的i是同一个变量，每次循环都是修改同一个值；但用let i的话，每一次循环都会生成一个全新的i绑定，这也是为什么在异步场景下用let不会出现var的经典问题（比如循环里的定时器回调拿到的都是最后一个i的值），在这段同步代码里虽然差异不明显，但执行逻辑上每个循环的i都是独立的哦~

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