for(let i = 0; i < 10; i++)和for(var i = 0; i < 10; i++)的思考

来源:互联网 发布:js拼接字符串逗号隔开 编辑:程序博客网 时间:2024/05/22 03:49

let、 var、 setTimeout,一点思考。

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

结果是很显而易见的,10次都是10,在面试前端的闭包知识时候很常见。
用上let之后,

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

结果是:
0、1、2、3、4、5、6、7、8、9

为什么var和let声明的i,得到不同的结果?

var声明的i,作用域不仅仅在for循环内,还在for循环的外部。

当setTimeout执行的时候,for循环已经完成,i此时的值是10,我们稍微调整一下代码:

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

结果是10次10。

for(var i = 0; i < 10; i++)

var i;for(i = 0; i < 10; i++)

等价。

但是在let声明的时候则不一样,

for(let i = 0; i < 10; i++)

let i;for(i = 0; i < 10; i++)

是不等价的,因为let声明只在代码块中有效。
但是,如果仅仅这样,我们或许很容易理解

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

得到10次10,然而为什么

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

得到0-9?

在setTimeout的时候,匿名函数function(){console.log(i);}会被声明创建,当匿名函数执行的时候,会查找当前运行环境的 i 的值。
var声明的 i ,运行环境的 i 的值为10,但是let声明的 i,运行环境中 i 的值是每一个循环创建匿名函数时候的 i。
所以得到了0-9的值。

let替换var,可以很好的解决闭包的问题。

阅读全文
0 0
原创粉丝点击