ECMAScript 6学习笔记(二):let和块级作用域
同步发布于:https://mingjiezhang.github.io/(转载请说明此出处)。
ES6中加入了let,也让JavaScript拥有了块级作用域。
没有块级作用域的JavaScript
在ES5及其之前的版本里,作用域只有全局作用域和函数作用域两种,而不像其他许多语言一样还拥有块级作用域。没有块级作用域的JavaScript在使用的过程中出现了许多意想不到的具体问题,比如下面这段代码的demo:
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
};
}
arr[3]();
如果是学过C++或者其他有块级作用域的人,可能类比觉得上述代码会输出3,不过事实上该代码输出的是10。
因为ES5及之前是没有块级作用域的,i所处的仍是全局作用域而不是块级作用域。因此,循环过程中数组arr的每个数组项所引用的函数中的变量i都是引用全局作用域中的i,因此arr3中i为for循环结束时的i的值10。
对于该问题,有很多方法解决。比如可以将for循环体的代码放入一个立即执行函数中,相当于创建一个新的作用域,将i当做实参传入里及执行函数,本质上是创造了一个模拟的块级作用域,当然也可以认为为内部的函数创建一个闭包(闭包的本质和作用域链息息相关)。
let的出现
现在我们再写之前的那段代码是,有了更加简洁的方法,使用ES6的let。
var arr = [];
for (let i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
};
}
arr[3](); //3
let的出现使得JavaScript终于拥有了块级作用域。因为ES6要考虑之前版本的兼容,所以是通过声明let来使用块级作用域。
当我们在一个代码块中使用let来声明变量,通过let声明的变量只在当前块作用域中有效。
{
let a = 1;
var b = 2;
}
console.log(a); //ReferenceError
console.log(b); //2
如上,let的声明方式让let所在的块成为块级作用域,同时let声明的变量无法在全局作用域中访问到,但是var变量依旧可以在全局作用域访问到。
无变量提升
let中不存在变量提升的现象。变量在使用之前必须被声明。
因此,这个定义也导致了暂时性死区的现象。
var c = 'test';
if (true) {
c = 'new'; //ReferenceError
let c;
console.log(c);
}
如上在块级块级作用域中重新声明全局作用域中的c时,这时,编译器会屏蔽全局作用域中的c,在该块级作用域中只能使用新声明的c。但由于块级作用域中let声明的变量无作用域提升现象,因此无法在声明c之前使用c(包括赋值c),出现暂时性死区的现象。
块级作用域
let的出现让JavaScript可以充分利用块级作用域的特性。我们可以在不同的块级作用域中使用同名变量。
if (true) {
let a = 1;
if(true){
let a = 2;
console.log(a); //2
}
console.log(a); //1
}
由于块级作用域出现,我们可以实现上述变量隔离的效果。
总结
let在不影响var使用的情况下,开创了JavaScript的块级作用域,未来想必let也会大量取代var的使用。
欢迎指正交流。未经允许,请勿转载。
ECMAScript 6学习笔记(二):let和块级作用域的更多相关文章
- ES6学习笔记(1)- 块级作用域
1. var声明变量和变量提升(Hoisting)机制的问题 在JS中通过var关键字声明的变量,无论在函数作用域中亦或是全局作用域中,都会被当成当前作用域顶部的变量,和就是所谓的提升机制(Hoist ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- ECMAScript 6 学习笔记(二)
ECMAScript 6 let和const命令 let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- python3.4学习笔记(二) 类型判断,异常处理,终止程序
python3.4学习笔记(二) 类型判断,异常处理,终止程序,实例代码: #idle中按F5可以运行代码 #引入外部模块 import xxx #random模块,randint(开始数,结束数) ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
随机推荐
- javaScript数据类型与typeof操作符
1,typeof操作符. typeof操作符是用来检测变量的数据类型.使用:typeof 变量名;返回以下字符串: 字符串 描述 undefined 未定义 boolean 布尔值 string 字 ...
- ZOJ 2753 Min Cut (Destroy Trade Net)(无向图全局最小割)
题目大意 给一个无向图,包含 N 个点和 M 条边,问最少删掉多少条边使得图分为不连通的两个部分,图中有重边 数据范围:2<=N<=500, 0<=M<=N*(N-1)/2 做 ...
- 【Android学习】XML文本的三种解析方式(通过搭建本地的Web项目提供XML文件)
XML为一种可扩展的标记语言,是一种简单的数据存储语言,使用一系列简单的标记来描述. 一.SAX解析 即Simple API for XML,以事件的形式通知程序,对Xml进行解析. 1.首先在Web ...
- Android 使用版本控制工具时添加忽略文件方式
一.使用SVN管理项目时,添加忽略文件的方式 Android Studio 配合SVN时,添加忽略文件相对简单,首先打开项目的Settings选项,切换到Version Control下的Ignore ...
- 如何复制DataRow(dataTabel中的行)
由于需要对dataTabel中的行进行上移和下移操作: row 1 行号0 row2 行号1 row3 行号2 例如将row3上移一行,即row2和row3对调位置. ...
- MDX 占比同比环比
http://blog.csdn.net/hero_hegang/article/details/9072889
- [CS231n-CNN] Convolutional Neural Networks: architectures, convolution / pooling layers
课程主页:http://cs231n.stanford.edu/ 参考: 细说卷积神经网络:http://blog.csdn.net/han_xiaoyang/article/details/ ...
- HTML5[5]:在移动端禁用长按选中文本功能
在手机浏览器中,长按可选中文本,但如果在应用中,会给人一种异样的感觉,最好还是禁用此功能为上. * { -webkit-touch-callout:none; -webkit-user-select: ...
- 注意啦!10 个你需要了解的 Linux 网络和监控命令
下面列出来的10个基础的每个Linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些:hostname, ping, ifconfig, iwconfig, netstat, nslooku ...
- 使用tomcat作为web应用容器时,启用新线程找不到Session的问题
今天做一个功能,为了快速响应前端,业务完成后,另起了一个线程做一些不影响业务的统计工作,然后立即将业务操作结果返回给前台. 结果在新线程里报空指针找不到request对象.检查了下,我们用的是stru ...