ES6块级作用域

时间:2023-03-09 21:28:40
ES6块级作用域

块级作用域的优点

避免变量冲突,比如程序中加载了多个第三方库的时候,如果没有妥善地将内部私有函数或变量隐藏起来,就很容易引发变量冲突;

可以方便的进行模块管理;

利于内存回收;(块级作用域里声明的变量在块级作用域执行完之后会全部销毁)

es6中的块级作用域

之前在看360的培训课程时,知道了{...}是个块级作用域,错误的认为{...}中声明的函数变量都不会被外界访问到,在看了你不知道的JS之后,发现并不是这样的。在块级作用域中使用let声明的变量外界无法访问到。

eg:

var foo = true;
if (foo) {
let bar = foo * 2;
bar = something( bar );
console.log( bar );
} c
onsole.log( bar ); // ReferenceError

let 关键字可以将变量绑定到所在的任意作用域中(通常是 { .. } 内部)。 换句话说, let为其声明的变量隐式地了所在的块作用域。

但是这种方式是隐式的,如果没有特别注意哪些块级作用域中有绑定的变量,程序变大了之后,容易造成混乱,所以最好为块作用域显式地创造块来部分解决这个问题。

1 var foo = true;
2 if (foo) {
3 { // <-- 显式的快
4 let bar = foo * 2;
5 bar = something( bar );
6 console.log( bar );
7 }
8 }
9 console.log( bar ); // ReferenceError

js块级作用域内部函数声明的提升问题

在读《你不知道的js》这本书是看到了如下这段代码:

ES6块级作用域
1 foo(); // "b"
2 var a = true;
3 if (a) {
4 function foo() { console.log("a"); }
5 }
6 else {
7 function foo() { console.log("b"); }
8 }
ES6块级作用域

书上说会打印出'b',因为一个普通块内部的函数声明通常会被提升到所在作用域的顶部, 这个过程不会像下面的代码暗示的那样可以被条件判断所控制。但是也说了这个行为并不可靠, 在 JavaScript 未来的版本中有可能发生改变, 因此应该尽可能避免在块内部声明函数。

博主试了在chrome上实验了一下,结果报了VM451:1 Uncaught ReferenceError: a is not defined at <anonymous>:1:1这样的错误,说明if语句中的foo函数声明并没有提升到全局作用域的顶部,所以井盖是标准已经发生了改变,在块级作用域中声明的函数并不会提升到其父级作用域的顶部。

博主又打开了IE进行测试,发现IE11会和chrome一样报ReferenceError的错,但IE10及以下都会同书中一样打印出'b'。鉴于新标准的支持程度并不高,还是尽量避免在块级作用域内部声明函数。