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,可以很好的解决闭包的问题。

for var let闭包理解的更多相关文章

  1. .Net 闭包理解

    .Net 闭包理解 这个东西初看是比较难懂,但是一旦理解之后就很容易了,做笔记以加深印象.且看这题 example.1 class Program { static void Main(string[ ...

  2. javascript闭包理解

    //闭包理解一 function superFun(){ var _super_a='a'; function subfuc(){ console.log(_super_a); } return su ...

  3. JavaScript中的闭包理解

    原创文章,转载请注明:JavaScript中的闭包理解  By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...

  4. javascript之闭包理解以及应用场景

    半个月没写博文了,最近一直在弄小程序,感觉也没啥好写的. 之前读了js权威指南,也写了篇博文,但是实话实说当初看闭包确实还是一头雾水.现在时隔一个多月(当然这一段时间还是一直有在看闭包的相关知识)理解 ...

  5. JavaScript闭包理解【关键字:普通函数、闭包、解决获取元素标签索引】

    以前总觉得闭包很抽象,很难理解,所以百度一下"闭包"概览,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的 ...

  6. JavaScript ——闭包理解

    昨天晚上听别人谈起闭包这个东西,虽然对js有一点了解但却丝毫没有印象,今天也没什么事就顺便研究了一下满足好奇宝宝.整合于网上的理解,记录一下. 一.闭包的作用域 要理解闭包,首先必须理解Javascr ...

  7. js闭包理解实例小结

    Js闭包 闭包前要了解的知识  1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

  8. 对于 Javascript 闭包理解

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  9. JS闭包理解_摘

    原文地址1:http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html 闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实 ...

随机推荐

  1. 微格式(microformat)

    由于HTML中缺少相应的元素,很难突出显示人.地点或日期等类型的信息.为了解决这个问题,有一组开发人员决定开发一套标准的命名约定盒标记模式来表示这些数据.这些命名约定基于vCard和iCalendar ...

  2. LeakCanary上传 leak trace 到服务器

    你可以改变处理完成的默认行为,将 leak trace 和 heap dump 上传到你的服务器以便统计分析. 创建一个 LeakUploadService, 最简单的就是继承 DisplayLeak ...

  3. maven 依赖和坐标

    1.maven 坐标由groupId.artifactId.packaging.version.classifier定义.2.classifier 用来帮助定义构建输出的一些附属构件.如,*javad ...

  4. CSS 小结笔记之选择器

    Css选择器主要分为以下几类 类选择器 ID选择器 通配符选择器 标签选择器 伪类选择器 复合选择器 1.类选择器:通过.classname 来选择 例如 .color2 { color: rebec ...

  5. linux ubuntu 本地镜像 软件源 制作方法

    1.配置当前软件源,镜像非常大,所以首先要配置一下载速度快的软件源http://fffo.blog.163.com/blog/static/2119130682014322104136601/2.安装 ...

  6. [WSUS] [Windows 10 Upgrade 1607/1703] 升级出错,出现 0xC1800118 或者卡在下载中…… 0%后失败

    1. 安装 KB3159706 ,并进行安装后维护操作:https://support.microsoft.com/en-us/help/3159706/update-enables-esd-decr ...

  7. 能力成熟度模型(CMM)

    能力等级 特点 关键过程 第一级 基本级 软件过程是混乱无序的,对过程几乎没有定义,成功依靠的是个人的才能和经验,管理方式属于反应式   第二级 重复级 建立了基本的项目管理来跟踪进度.费用和功能特征 ...

  8. Jquery组织Form表单提交之Form submission canceled because the form is not connected

    有时候导出Excel时需要根据某些条件筛选数据,然后将数据通过NPOI生成Excel并导出.组织数据时可以通过放到一个表单中,某些场景是使用脚本(如:jquery)组织一个form(通过字符串拼接), ...

  9. [翻译] OCMaskedTextField

    OCMaskedTextField https://github.com/OmerCora/OCMaskedTextField Simple class to display dynamically ...

  10. [控件] LabelView

    LabelView 此LabelView是用来将Label显示在固定的View上的,需要计算Label的高度与宽度. 源码: NSString+StringHeight.h 与 NSString+St ...