详解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 相关文章推荐
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
js实现常用排序算法
Aug 09 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
javascript canvas实现简易时钟例子
Sep 05 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 读取 HTTP chunked 数据
2016/02/26 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
jQuery 表格工具集
2010/04/25 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python yield使用方法示例
2013/12/04 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python爬虫容易学吗
2020/06/02 Python
韩国商务邀请函
2014/01/14 职场文书
七年级地理教学反思
2014/01/26 职场文书
会走路的树教学反思
2014/02/20 职场文书
中班上学期个人总结
2015/02/12 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js