详解ES6之用let声明变量以及let loop机制


Posted in Javascript onJuly 15, 2017

在上一篇对js闭包的理解那篇文章中,我提到过ES6之前,JavaScript这门语言没有块级作用域,但是在ES6中,加入了let命令,用let声明的变量仅仅可以在其所在的块级作用域中使用。

相比用var声明,let声明的特点

1.let声明的变量仅在该变量所在的作用域有效

for(let i=0;i<5;i++){} console.log(i); //报错
for(var i=0;i<5;i++){} console.log(i); //i=5;

2.不存在变量提升

先解释下变量提升:变量提升就是变量声明语句都会被提到所在作用域开始处,就是经过变量提升后,代码的实际执行顺序会与你所写的顺序不同。

console.log(i);
var i=2;

因为变量提升,所以上述代码不会报错,只会输出undefined。

但是要注意:变量提升只是提升声明语句,而不提升赋值语句

所以上述语句经过提升之后,实际的代码执行顺序是

var i;
console.log(i);
i=2;

再来看道经典试题

var name = 'World!'; 
(function () { 
if (typeof name === 'undefined') { 
  var name = 'Jack'; 
  console.log('Goodbye ' + name); 
}else{ 
  console.log('Hello ' + name); 
} 
})();

请问最终console的结果是什么?

如果对变量提升一无所知,会很容易的得出hello world的结果。

我对变量提升略知一二,得出的结果是hello Jack.

但是正确结果是Goodbye Jack. 做错的原因就是我没有注意到变量提升仅仅是声明提升。

3.不可以在同一作用域内重复声明

function temp(){
   let a;
   let b; 
} //报错

4.暂时性死区

var tmp="123"; 
if(true){ 
 tmp="abc";
 let tmp;
}

定义(出自ES6标准入门一书):在代码块内,使用let变量声明之前,该变量是不可以用的。这在语法上称为暂时性死区。

但是如果去掉上述let tmp;这句,代码是不会错的,只是这时的tmp即外部的全局变量,但是你如果要声明一个与外部变量同名的局部变量,那么你就要放在这个同名变量使用之前,否则就会报错。

说一说(let i=0;i<5;i++)的运行机制

不好意思,我们还得拿闭包来说事。

var a=[]; 
for(var i=0;i<5;i++){
  a[i]=function(){
    console.log(i);
  }
}

然后,结果i并非我们想象得那样,按照0,1,2...的顺序打印,而都是打印5,在上一篇文章理解js闭包中,我们已经知道如何用闭包解决这个问题。但是呢,这还有一种更简单的解法,如下

for(let i=0;i<5;i++){
   a[i]=function(){
     console.log(i);
   }
}

对,就是这么简单,用一个let代替var,就搞定了。但是为什么呢?说实话,闭包我能想得通,但是用let真心想不通为什么可以解决这个问题。问过一些人,但是他们只是很糊弄得说,let是块级作用域。我觉得他们压根就没有搞懂,我觉得这里绝对有蹊跷,仅仅凭let是块级作用域并不能解释的通,一定有其他机制。

我的疑惑:就算let是块级作用域,可是在函数里,我们没有定义新的i,所以你访问i,其实都在访问父级作用域,对 let i=0;使得i只能在for循环的{}内使用,但是当你调用ai的时候,不管i是多少,它们都应该是访问的是同一个i,怎么会出现0,1,2,3,4呢?
百度一下,果然不出我所料,阮一峰大神给出的解释是,对每一次循环,都是产生不同的i,所以5次循环,产生了5个块级作用域,而不同的块级作用域间实现i++是通过js引擎记住上一个i值实现的。这样一来,ai调用时,就会访问到与自己对应的i,而不是同一个i.

所以,let可以得到闭包的效果是因为let具有块级作用域,与let loop特殊的机制。

起初,我对这个结果不太相信,因为和直觉不太相符,感觉5次循环,产生5个i,和自己以前的认知不大相同啊。然后我有有了新的发现

第一个发现:

for(let i=0;i<5;i++){
   let i="abc";
   console.log(i);
}

我吃惊的是竟然没有报错!说好的let不可以重复声明呢?这充分证明了let i=0;与let i="abc"不在同一个作用域。

第二个发现:可以通过babel将ES6代码转为ES5,看看上述代码是如何实现的?

详解ES6之用let声明变量以及let loop机制

先创建一个loop函数,最终在循环的时候调用loop函数并将i作为参数传入,这样便会形成5个不同的副本。这也证明了用let代替闭包,关键是形成了5个不同的块级作用域。

最后,ES6只是一种规范,比如说let的规范,但实现该规范的是JS引擎,如babel对上述代码的转换便体现出了babel对let loop的实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
javascript 常见功能汇总
Jun 11 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
详解JavaScript中return的用法
May 08 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
vue增删改查的简单操作
Jul 15 #Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 #Javascript
Javascript实现基本运算器
Jul 15 #Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 #Javascript
Javascript实现时间倒计时效果
Jul 15 #Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 #Javascript
JavaScript实现时间表动态效果
Jul 15 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php mssql 时间格式问题
2009/01/13 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Python的高阶函数用法实例分析
2019/04/11 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
golang/python实现归并排序实例代码
2020/08/30 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
英文自荐信格式
2013/11/28 职场文书
个人求职信范文分享
2014/01/06 职场文书
美发店5.1活动方案
2014/01/24 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
党校毕业个人总结
2015/02/28 职场文书
大学学生会辞职信
2015/05/13 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python