从延时打印0-5看作用域和闭包

《你不知道的JavaScript上卷》第一部分第5章

1.第一次延时打印

for (var i = 0; i <= 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, i * 1000);
}
console.log("global i=", i)
//结果：先打印global i= 6，然后延时打印6个6

结果分析

终止循环的条件是i<=5,第一次满足条件的i值是6，所以循环结束的时候i的值是6；
setTimeout()是一个宏任务，需等待上一个宏任务完成才会执行，所以会先打印global i= 6；
在for循环内的语句var i = 0;var i声明会被提升到全局，所以全局只有一个i；
在for循环内创建了6个setTimeout，第二个参数分别是0，1000，2000 ... 5000
当外部的宏任务执行完毕之后，开始执行宏任务setTimeout()，然后开始打印i的值，此时i=6;
第一个setTimeout的延时参数值是0，所以会再打印global i= 6之后立即打印一个6，随后每隔一秒打印一个6；

2.第二次延时打印

每次循环都创建新的自执行函数

for (var i = 0; i <= 5; i++) {
    (
        function () {
            var j = i;
            setTimeout(() => {
                console.log(j)
            }, j * 1000);
        }
    )();
}
console.log("global i=", i);
//结果：global i= 6 0 1 2 3 4 5 延时打印0-5；

实现所要的效果！
简化，将i作为参数传递进去

for (var i = 0; i <= 5; i++) {
    (
        function (j) {
            setTimeout(() => {
                console.log(j)
            }, j * 1000);
        }
    )(i);
}
console.log("global i=", i);
//结果：global i= 6 0 1 2 3 4 5 延时打印0-5；

3.第三次延时打印

使用let声明变量，实现效果

for (var i = 0; i <= 5; i++) {
    let j = i;
    setTimeout(() => {
        console.log(j)
    }, j * 1000);
}
console.log("global i=", i);
//结果：global i= 6 0 1 2 3 4 5 延时打印0-5；

for (var i = 0; i <= 5; i++) {
    var j = i;
    setTimeout(() => {
        console.log(j)
    }, j * 1000);
}
console.log("global i=", i);
console.log("global j=", j);
//结果：先打印global i= 6，global j= 5，然后延时打印6个5，重点是5

问题：let j = i;做了什么，为什么可以实现效果？换成var j = i;为什么不行？

let关键字可以将变量绑定到所在的任意作用域中，换句话说，let为其声明的变量隐式的劫持了所在的块作用域；
每次循环都会创建一个新的j，setTimeout执行时最终打印的是属于它那次循环的j；
在JavaScript中存在四个语法作用域：表达式，语句，函数和全局，在变量的作用域上，并没有"语句"这个级别，只有全局作用域和函数作用域两种，所以var j = i；还是会创建全局的变量j；

语法作用域存在4种等级

相同级别的语法作用域可以互相嵌套例如：if嵌套for，function互相嵌套

高级别的语法作用域可以嵌套低级别的语法作用域例如：function嵌套for或者if

低级别的语法作用域不能嵌套高级别的语法作用域例如：if嵌套function

if与for的语法作用域是同级别，所以效果和for一样

if(true){
    var i = 0;
}
console.log("global i=",i)
var j = 1;
if(true){
    j = 2;
}
console.log("global j=",j)
//结果：global i= 0 global j= 2

4.第四次延时打印

for(let i = 0;i<=5;i++){
    setTimeout(() => {
        console.log(i)
    }, i * 1000);
}
console.log("global i=", i);
//结果:报错，ReferenceError: i is not defined 也就是说i并未在全局声明
for(let i = 0;i<=5;i++){
    setTimeout(() => {
        console.log(i)
    }, i * 1000);
}
//结果：延时顺序打印 0 1 2 3 4 5

5. 闭包在哪里？

函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性被称为“闭包“ --《JavaScript权威指南》

setTimeout的第一个参数是一个函数，当使用let进行变量声明的时候，它记住了每次循环声明的变量i，并且在延时结束后能够访问到i并把i的值打印出来，这就是闭包。

总结

for循环内声明的变量会被提升到它所在的作用域；
let声明变量会将变量绑定到所在作用域中；
setTimeout内部函数能记住并访问所在其所在作用域内的变量，这种特性被称为闭包；