6

可能还是很多同学没有理解下面的三段代码,今天从原理分析一下

var

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}
// 10 10 10 10 10 10 10 10 10 10 

知识点:

  1. js只有全局作用域和函数作用域
  2. var存在变量提升
  3. 函数调用会形成一条作用域链,参数会沿着这个链条查找

图解步骤

初始状态,注意scope是指向定义函数的地方

执行for循环之后,i变成了10

开始执行setTimeout回调,因为AO活动对象上没有i,所以会从作用域链上查找,此时window上的i已经是10

立即执行

for (var i = 0; i < 10; i++) {
    // capture the current state of 'i'
    // by invoking a function with its current value
    (function(i) {
        setTimeout(function() { console.log(i); }, 100 * i);
    })(i);
}
// 0 1 2 3 4 5 6 7 8 9

知识点

  1. 闭包可以获取外层函数作用域的变量

图解步骤

初始状态,注意scope是指向定义函数的地方

执行立即执行函数

立即执行函数执行完毕,出栈,注意此时AO活动对象并不会被销毁,而是暂存起来等待被调用

执行下一个循环, i = 1

立即执行函数执行完毕,出栈,注意此时AO活动对象并不会被销毁,而是暂存起来等待被调用

重复以上步骤,直到i=10,停止循环

接下来就是执行setTimeout回调

因为setTimeout回调里没有i,所以从作用域链上查找,所以输出0

接下来依次执行i = 1,2,3...时的setTimeout回调,同上

let

for (let i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}
// 0 1 2 3 4 5 6 7 8 9

知识点

  1. let会形成块级作用域
  2. 每次迭代都会创建这样一个新作用域

图解步骤

初始状态

下一个循环

继续循环,直到10

接下来执行setTimeout回调

1~9同理

更多资源

https://github.com/abc-club/f...


普通程序员
4k 声望811 粉丝

分享IT干货,内推大厂