详解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 相关文章推荐
纯js分页代码(简洁实用)
Nov 05 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
js实现随机点名程序
Sep 17 Javascript
使用原生javascript开发计算器实例代码
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 curl基本操作详解
2013/07/23 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
一则python3的简单爬虫代码
2014/05/26 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
暑假打工感想
2015/08/07 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL