塊級作用域
為什么需要塊級作用域？
ES5 只有全局作用域和函數(shù)作用域，沒有塊級作用域，這帶來很多不合理的場景。
第一種場景，內(nèi)層變量可能會覆蓋外層變量。
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
}
f(); // undefined
因為var的變量提升，導致內(nèi)層的tmp變量覆蓋了外層的tmp變量。
第二種場景，用來計數(shù)的循環(huán)變量泄露為全局變量。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
上面代碼中，變量i只用來控制循環(huán)，但是循環(huán)結(jié)束后，它并沒有消失，泄露成了全局變量。一般來說這并不是我們想要的。
................................................................................................................
ES6 的塊級作用域
let實際上為 JavaScript 新增了塊級作用域。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
上面的函數(shù)有兩個代碼塊，都聲明了變量n，運行后輸出 5。這表示外層代碼塊不受內(nèi)層代碼塊的影響。如果兩次都使用var定義變量n，最后輸出的值才是 10。
ES6 允許塊級作用域的任意嵌套。
{{{{
{let insane = 'Hello World'}
console.log(insane); // 報錯
}}}};
上面代碼使用了一個五層的塊級作用域，每一層都是一個單獨的作用域。第四層作用域無法讀取第五層作用域的內(nèi)部變量。
內(nèi)層作用域可以定義外層作用域的同名變量。并不會相互污染。
{{{{
let insane = 'Hello World';
{let insane = 'Hello World'}
}}}};
塊級作用域的出現(xiàn)，實際上使得獲得廣泛應用的立即執(zhí)行函數(shù)表達式（IIFE）不再必要了。
// IIFE 寫法
(function () {
var tmp = ...;
...
}());
// 塊級作用域?qū)懛?{
let tmp = ...;
...
}
................................................................................................................
塊級作用域與函數(shù)聲明
函數(shù)能不能在塊級作用域之中聲明？這是一個相當令人混淆的問題。
ES5 規(guī)定，函數(shù)只能在頂層作用域和函數(shù)作用域之中聲明，不能在塊級作用域聲明。
// 情況一
if (true) {
function f() {}
}
// 情況二
try {
function f() {}
} catch(e) {
// ...
}
上面兩種函數(shù)聲明，根據(jù) ES5 的規(guī)定都是非法的。
但是，瀏覽器沒有遵守這個規(guī)定，為了兼容以前的舊代碼，還是支持在塊級作用域之中聲明函數(shù)，因此上面兩種情況實際都能運行，不會報錯。
ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數(shù)。ES6 規(guī)定，塊級作用域之中，函數(shù)聲明語句的行為類似于let，在塊級作用域之外不可引用。
function f() { console.log('I am outside!'); }
(function () {
if (true) {
// 重復聲明一次函數(shù)f
function f() { console.log('I am inside!'); }
}
f();
}());
上面代碼在 ES5 中運行，會得到“I am inside!”，因為在if內(nèi)聲明的函數(shù)f會被提升到函數(shù)頭部，實際運行的代碼如下。
// 瀏覽器的 ES6 環(huán)境
function f() { console.log('I am outside!'); }
(function () {
if (false) {
// 重復聲明一次函數(shù)f
function f() { console.log('I am inside!'); }
}
f();
}());
// Uncaught TypeError: f is not a function
上面的代碼在 ES6 瀏覽器中，都會報錯。
考慮到環(huán)境導致的行為差異太大，應該避免在塊級作用域內(nèi)聲明函數(shù)。如果確實需要，也應該寫成函數(shù)表達式，而不是函數(shù)聲明語句。
// 瀏覽器的 ES6 環(huán)境
// 塊級作用域內(nèi)部的函數(shù)聲明語句，建議不要使用
{
let a = 'secret';
function f() {
return a;
}
}
// 塊級作用域內(nèi)部，優(yōu)先使用函數(shù)表達式
{
let a = 'secret';
let f = function () {
return a;
};
}
另外，還有一個需要注意的地方。ES6 的塊級作用域必須有大括號，如果沒有大括號，JavaScript 引擎就認為不存在塊級作用域。
// 第一種寫法，報錯
if (true) let x = 1;
// 第二種寫法，不報錯
if (true) {
let x = 1;
}
上面代碼中，第一種寫法沒有大括號，所以不存在塊級作用域，而let只能出現(xiàn)在當前作用域的頂層，所以報錯。第二種寫法有大括號，所以塊級作用域成立。
函數(shù)聲明也是如此，嚴格模式下，函數(shù)只能聲明在當前作用域的頂層。
// 不報錯
'use strict';
if (true) {
function f() {}
}
// 報錯
'use strict';
if (true)
function f() {}}
