ECMAScript 6学习笔记(二):let和块级作用域

时间:2021-12-12 00:30:15

同步发布于: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和块级作用域的更多相关文章

  1. ES6学习笔记(1)- 块级作用域

    1. var声明变量和变量提升(Hoisting)机制的问题 在JS中通过var关键字声明的变量,无论在函数作用域中亦或是全局作用域中,都会被当成当前作用域顶部的变量,和就是所谓的提升机制(Hoist ...

  2. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  3. ECMAScript 6 学习笔记(二)

    ECMAScript 6 let和const命令 let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a ...

  4. ES6学习笔记&lt&semi;二&gt&semi;arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  5. python3&period;4学习笔记&lpar;二&rpar; 类型判断,异常处理,终止程序

    python3.4学习笔记(二) 类型判断,异常处理,终止程序,实例代码: #idle中按F5可以运行代码 #引入外部模块 import xxx #random模块,randint(开始数,结束数) ...

  6. WPF的Binding学习笔记&lpar;二&rpar;

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  7. AJax 学习笔记二&lpar;onreadystatechange的作用&rpar;

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. &lbrack;Firefly引擎&rsqb;&lbrack;学习笔记二&rsqb;&lbrack;已完结&rsqb;卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  9. JMX学习笔记&lpar;二&rpar;-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

随机推荐

  1. Mongo DB 2&period;6 需要知道的一些自身限定

    在现实的世界中,任何事情都有两面性,在程序的世界中,亦然! 我们不论是在使用一门新的语言,还是一门新的技术,在了解它有多么的让人兴奋,让人轻松,多么的优秀之余,还是很有必要了解一些他的局限性,方便你在 ...

  2. extjs简单动画2

    var store = Ext.create('Ext.data.Store', { storeId:'employeeStore', fields:['name', 'seniority', 'de ...

  3. 杭电ACM 1196

    #include<stdio.h>int main(){ int num,j,k,s,f; int a[7]={0,0,0,0,0,0,0}; while(scanf("%d&q ...

  4. JSON的三种解析方式

    一.什么是JSON? JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串 只不过元素会使用特定 ...

  5. JS的构造及其事件注意点总结

    一:js的组成 ECMAscript bom dom 类型包括: number boolean  string undefined  object function 二:基本函数作用 parseInt ...

  6. 一条结合where、group、orderby的linq语法

    DataTable dt = (from x in dsResult.Tables[0].AsEnumerable() where DataTrans.CBoolean(x["IsCheck ...

  7. 4&period;Linux的文件搜索命令

    1.文件搜索命令  which 语法:which [命令名称] 范例:$which ls  列出ls命令所在目录 [chanshuyi@localhost ~]$ which ls alias ls= ...

  8. JS的Dom树小结

    一[DOM树节点]  DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点:  通过getElement系列方法,可以去到元素节点.     二[查看节点] ...

  9. Vue使用中常见问题

    1.安装sass时报未找到 1.原因应该同时安装:1.npm install --save-dev sass-loader    2.npm install --save-dev node-sass ...

  10. note 11 字典

    字典 Dictionary +什么是字典? +一系列的"键-值(key-value)"对 +通过"键"查找对应的"值" +类似纸质字典,通过 ...