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. React—Native开发之原生模块向JavaScript发送事件

    首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript ...

  2. 更新oracle数据库表如何实现主键自增长

     在数据库中实现主键自动增长有利于我们做数据插入操作,在SQL SERVER上创建表时可以在int类型的字段后加上identity(1,1),该字段就会从1开始,按照+1的方式自增,将这个字段设置 ...

  3. angularjs -- 路由监听

    前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...

  4. MQTT介绍(1)简单介绍

    MQTT目录: MQTT简单介绍 window安装MQTT服务器和client java模拟MQTT的发布,订阅 MQTT: MQTT(Message Queuing Telemetry Transp ...

  5. JQuery 引用方式

    # head里面 <script src="jquery.min.js"></script> <script src="common.js& ...

  6. Python 执行主程序

    主程序里的代码包含的东西比较多, 如果在程序的.py文件里执行还要再调一遍方法, 但通常这个调用在测试完结后是要删掉的. 那么问题来了, 如果把这个代码直接发给别人, 执行时要再加上调用, 这个就很烦 ...

  7. 2.CSS使用基础(1)

    目录 一.css颜色的四种表示法 二.使用css 4种方式 三.css注释: 四.CSS Id 和 Class选择器 五.多重样式优先级顺序 六.CSS Backgrounds(背景) 七.CSS T ...

  8. javascript版format函数,方便实现复杂字串连接

    javascript版format函数,方便实现复杂字串连接 String.prototype.format = function () { var args = arguments; console ...

  9. iOS设计模式 - 责任链

    iOS设计模式 - 责任链 原理图 说明 在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知道链 ...

  10. 可以简易设置文字内边距的EdgeInsetsLabel

    可以简易设置文字内边距的EdgeInsetsLabel 最终效果: 源码: EdgeInsetsLabel.h 与 EdgeInsetsLabel.m // // EdgeInsetsLabel.h ...