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. AE三维点击查询(3D Identify)的实现(转)

    AE三维点击查询(3D Identify)的实现,类似ArcGIS的Identify对话框/////////////////////////////////////////////////////// ...

  2. 移除button点击时的黑边

    input[type=submit], input[type=reset], input[type=button]{ outline:none; filter: chroma(color=#00000 ...

  3. Myeclipse打war包方法

    Myeclipse三种打包方法第一种方法打开Myeclipse如图操作. 如果该项目已存在需要移除之后在进行第三步,接着往下走. 项目打war包成功,推荐使用第一种方法. 第二种方法https://b ...

  4. Ajax 与 JSON

    Ajax,是对Asynchronous JavaScript + XML的简写.这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. Ajax的核心是XMLHttpRequest对 ...

  5. 在android工程中,res目录下又有anim、drawable、layout、menu、raw、values和xml文件夹,分别用来保存?

    res目录主要是存放资源文件的!layout 布局 这个就是你经常看到的与用户交互的界面的 xml 文件,就是各个 view 的排列和嵌套,没什 么好说的啦 风格和主题. 风格主要是指 view 的显 ...

  6. 重装系统,打开VS进行程序调试运行的时候 Unable to find manifest signing certificate in the certificate store

    重装系统,打开VS进行程序调试运行的时候 Unable to find manifest signing certificate in the certificate store. 项目的属性-> ...

  7. 从源码上分析ListView的addHeaderView和setAdapter的调用顺序

    ListView想要添加headerview的话,就要通过addHeaderView这个方法,然后想要为ListView设置数据的话,就要调用setAdapter方法了.但是,在调用addHeader ...

  8. python中的字符串编码问题——3.各操作系统下的不同编码方式

    各操作系统下的不同编码方式  先看一下 linux,python2.7 >>> B = b'\xc3\x84\xc3\xa8' >>> B.decode('utf- ...

  9. CSS 小结笔记之选择器

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

  10. leetCode题解之寻找string中最后一个word的长度

    1.题目描述 返回一个 string中最后一个单词的长度.单词定义为没有空格的连续的字符,比如 ‘a’,'akkk'. 2.问题分析 从后向前扫描,如果string是以空格‘  ’结尾的,就不用计数, ...