ES 6 新增的块级作用域let
在2015年之前,JavaScript是没有块级作用域的,之后在ES6版本新增了块级作用域,为了更好的理解ES6这一新特性,我们先提出这几个问题:
1.什么是块级作用域?
2.为什么要添加块级作用域?
3.怎么使用块级作用域?
什么是块级作用域?
块级作用域,就是指在只能在语句块这个范围中起作用,超出这个范围则无效,其中语句块,是指将多个语句放在一对大括号{}里面,通常用于流程控制,比如if,for,while
等等。
示例
while (x < 10) {
if(x>5){
x++;
}
}
这里{if(x>5){x++;}}
是一个语句块,{x++;}
也是一个语句块,巧记:一对大括号就是一个语句块,就代表一个作用域。
为什么要添加块级作用域?
ES6之前,变量只有全局作用域(也称全局变量)和函数作用域(局部变量),所以会导致以下不合理的情况:
1.函数的局部变量会覆盖同名的全局变量。
示例
var a = 0
(function() {
console.log('函数内部调用全局的a:', a) //输出:函数内部调用全局的a: 0
})()
console.log('全局变量a:', a) //输出;全局变量a: 0
var a = 0
;(function() {
console.log('a=', a) //输出:a= undefined,按理说应该输出a=0
if (false) {
var a = 1
console.log(a)
}
})()
原因
变量提升导致内层的 a 变量覆盖了外层的 a 变量。
这就导致了如果你要在函数内部调用全局变量,那么函数内声明的局部变量就一定不能和全局变量同名。
2.函数内部中,只要声明了变量,之后在函数结束前,都可以使用。
示例
(function() {
console.log(a) //输出:undefined
if (true) {
for (var a = 0; a < 10; a++) {
var b = 0
console.log(a) //输出:0~9
}
}
console.log('if之外a:', a) //输出:if之外a: 10
console.log('if之外b:', b) //输出:if之外b: 0
})()
原因
在for循环中声明的a,b变量,在函数结束前并不会被销毁。
这样就导致了一些不必要的内存消耗。
为了避免这两个不合理的问题,块级作用域就出现了。
怎么使用块级作用域?
使用变量命令 let
。
示例
(function() {
if (true) {
for (let a = 0; a < 10; a++) {
console.log(a) //输出:0~9
}
}
console.log('if之外a:', a) //报错:ReferenceError: a is not defined
})()
对于let
命令的变量:
- 作用域:变量所在的语句块,即一对大括号{};
- 不存在变量提升,而是“暂时性死区”,也就是说从块级作用域开始到声明该变量,这段时间里是不能访问该变量的;
- 同一语句块中,不能被同一变量名不能重复声明。
- 经典案例:
let
命令代替闭包功能
闭包实现:
var arr = [];
for(var i = 0; i < 2; i++){
arr[i] = (function(i){
return function(){
console.log(i);
};
}(i));
};
arr[1]();
let 实现:
'use strict';
var arr = [];
for(let i = 0; i < 2; i++){
arr[i] = function(){
console.log(i);
};
};
arr[1]();
参考文章:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。