《你不知道的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内部函数能记住并访问所在其所在作用域内的变量，这种特性被称为闭包；
