选自 Typescript 中文教程。

快速的猜一下下面的代码会返回什么:

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

好吧,看一下结果:

10
10
10
10
10
10
10
10
10
10

我们传给setTimeout的每一个函数表达式实际上都引用了相同作用域里的同一个i

让我们花点时间思考一下这是为什么。 setTimeout在若干毫秒后执行一个函数,并且是在for循环结束后。for循环结束后,i的值为10。 所以当函数被调用的时候,它会打印出 10

而 let(ES6中声明变量的关键字) 则不会这样。

回想一下前面setTimeout的例子,我们最后需要使用立即执行的函数表达式来获取每次for循环迭代里的状态。 实际上,我们做的是为获取到的变量创建了一个新的变量环境。

let声明出现在循环体里时拥有完全不同的行为。 不仅是在循环里引入了一个新的变量环境,而是针对 每次迭代都会创建这样一个新作用域。 这就是我们在使用立即执行的函数表达式时做的事,所以在 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

var 的一个坑,以及 let的更多相关文章

  1. 用html5的视频元素所遇到的第一个坑

    html5 有一个video标签,这个是被大家所熟知的事情.按照w3c的规范,我认真的写出如下代码: <video preload="auto" controls=" ...

  2. JavaScript中sort方法的一个坑(leetcode 179. Largest Number)

    在做 Largest Number 这道题之前,我对 sort 方法的用法是非常自信的.我很清楚不传比较因子的排序会根据元素字典序(字符串的UNICODE码位点)来排,如果要根据大小排序,需要传入一个 ...

  3. 困扰多日的C#调用Haskell问题竟然是Windows的一个坑

    最近一直被C#调用Haskell时的“尝试读取或写入受保护的内存”问题所困扰(详见C#调用haskell遭遇Attempted to read or write protected memory,C# ...

  4. Collection<T> 的一个坑

    当前所在的公司偏好使用 Collection<T>(System.Collections.ObjectModel), 这货比起List<T>不仅少了很多实用方法, 而且还有一个 ...

  5. 【转】最近用Timer踩了一个坑,分享一下避免别人继续踩

    [转]最近用Timer踩了一个坑,分享一下避免别人继续踩 最近做一个小项目,项目中有一个定时服务,需要向对方定时发送数据,时间间隔是1.5s,然后就想到了用C#的Timer类,我们知道Timer 确实 ...

  6. 记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

    我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...

  7. dcef3 指出一个坑

    dcef3 指出一个坑 http://ju.outofmemory.cn/entry/80119 BccSafe's Blog 2014-06-11 2388 阅读   dcef3提供了TChromi ...

  8. golang连接达梦数据库的一个坑

    golang连接达梦数据库的一个坑 有一次项目中用到了达梦数据库,后端语言使用的golang,达梦官方并未适配专门的golang连接方式,正一筹莫展的时候发现达梦提供了odbc的连接,这样可以使用类似 ...

  9. 监控jvm的一个坑

    监控jvm的一个坑 1,遇到的问题 我按照以往文档,在catalina.sh里追加jvm的监控api,如下 紧接着我启动 tomcat. 未报任何错误. 发现 lsof –i:12000, 12000 ...

随机推荐

  1. 本地代码提交到远程仓库(git)

    [准备环境] 我没有在Linux搭建gitlab私有云服务器,用的是开源的 gitee托管平台 1.在gitee注册账号 2.本地下载git客户端 [步骤] 1  本地新建1个文件夹  进入文件夹后 ...

  2. WeChair项目Beta冲刺(2/10)

    团队项目进行情况 1.昨日进展    Beta冲刺第二天 昨日进展: 昨天由于组内成员课程繁重,但是大家还是花时间一起开会谈论了开发的一些细节和交流了一些问题 2.今日安排 前端:扫码占座功能和预约功 ...

  3. json 文件注释

    json文件注释: "_comment":"this is commets", "jsondata":{ "注释":&q ...

  4. opencv 单通道合并为多通道

    int main(){ cv::Mat m1=(cv::Mat_<int>(,)<<,,,,,); cv::Mat m2=(cv::Mat_<int>(,)< ...

  5. skywalking学习ppt

    和传统应用监控的区别,Dapper论文 监控图

  6. JavaWeb网上图书商城完整项目--day02-24.分类模块的相关类创建

    所谓的分类模块:就是显示所有的分类的功能,显示所有的分类在left.jsp页面中 这就是显示所有的分类: 要实现上面的,我们首先创建一个分类模块,该模块需要实现下面的功能 我们先创建上面的java包 ...

  7. laravel生成key失败

    laravel生成key失败 生成KEY失败.原因是没有复制.env文件 In KeyGenerateCommand.php line 96: file_get_contents(D:\project ...

  8. Idea 可用激活方式

    链接:https://pan.baidu.com/s/14ljbzMJ6uF9zKcQ575ftFA 提取码:yd54

  9. linux主机连接sftp报错received unexpected end-of-file from SFTP server

    SFTP 连接主机失败,提示信息如下: 登陆目标主机,编辑查看 /etc/ssh/sshd_config 文件,找到 Subsystem 关键字 替换为 Subsystem sftp internal ...

  10. vue基础入门(2.3)

    2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...