重讀《深入理解ES6》塊級作用域

一、關於變數宣告提公升

在 es5 中，我們通常會使用var來宣告變數。在使用var宣告變數的時候，通常會遇到變數宣告提公升的問題。這種機制會讓很多初學者疑惑不解。其實當我們理解了乙個變數通常包括宣告和賦值兩個部分，這個問題也就不難理解了。

// 1
console.log(a); // undefined
var a = 3;
// 2
function foo() 
}

事實上，無論在全域性作用域或者函式作用域中，只要通過var關鍵字宣告的變數，不論在**宣告，都會被當成在當前作用域頂部宣告的變數。

// 1
var a;
console.log(a);
a = 3;
// 2
function foo() 
}

二、塊級作用域

其實，變數提公升的機制，不太符合我們的編碼習慣，我們常常希望**能夠按照順序執行，這也符合一般人的邏輯習慣。為此 es6 引入了塊級作用域的概念。

塊級作用域其實就是詞法作用域，我們的**寫在哪，就會在**執行，這更符合我們的程式設計習慣。我們常說的塊包括函式內部和{}之間的部分。

為了實現塊級作用域，es6 採用let和const代替var來宣告變數。用let和const宣告的變數會把變數的作用域限制在當前的**塊中，並且宣告的變數不會被提公升。另外，用let宣告的變數，在同一**塊內，禁止重複宣告。

// 1、變數不會提公升
console.log(a); // referenceerror: a is not defined
let a = 3;
// 2、變數只能在當前作用域訪問
if (true) 
console.log(b); // referenceerror: b is not defined
// 3、禁止重複宣告
function foo() 
foo();

三、let 與 const 的區別

用let和const都可以建立乙個塊級作用域，唯一的區別是const用來宣告乙個常量，它的值一旦被設定後不可修改。所以，用const宣告的常量必須初始化。

// 1、不可更改
const a = 1;
a = 2; // typeerror: assignment to constant variable.
// 2、必須初始化
const b; // syntaxerror: missing initializer in const declaration

關於const宣告的變數不可修改，有乙個值得注意的地方就是用const宣告乙個物件。比如：

const tom = ;
tom.age = 19; // 這是可以的

我們可以理解為，用const宣告了乙個變數 tom，將乙個物件的引用位址賦值給變數 tom，只要這個引用位址不發生變化，內部的值是可以修改的。

四、迴圈中塊級作用域

在 es5 中，比較讓人頭疼的地方可能就是 for 迴圈了。在迴圈中，我們用var宣告乙個變數，迴圈結束後，我們其實是希望這個變數被銷毀的。但由於var宣告的變數具有宣告提公升的特性，所以當我們用 for 迴圈的時候，往往會汙染我們的全域性作用域。

for (var i = 0; i < 10; i++) 
console.log(i); // 10
// 當迴圈結束的時候，其實我們是希望變數 i 可以被銷毀的。
// 但其實它被留在了全域性

這個時候，我們使用let來宣告迴圈中的變數，就可以輕易的解決這個問題。

for (let i = 0; i < 10; i++) 
console.log(i); // referenceerror: i is not defined
// 可以看到，迴圈結束，變數 i 就被銷毀了。 perfect~~

最後總結一下，let和const幫助我們解決了不少問題，我們不會再為變數提公升引發的種種問題而困惑了，同時在迴圈中使用let來代替var可以在迴圈結束的時候銷毀變數，避免無用的變數影響全域性。而當前使用塊級繫結的最佳實踐是：預設使用const，只在確定需要改變變數的值時，使用let，以最大化地避免錯誤的產生。

重讀《深入理解ES6》塊級作用域

es6 塊級作用域用法

ES6的塊級作用域

ES6的塊級作用域

重讀《深入理解ES6》 塊級作用域

es6 塊級作用域用法

ES6的塊級作用域

ES6的塊級作用域

相關推薦

重讀《深入理解ES6》塊級作用域