變量聲明一直是JavaScript中一個需要技巧的部分。在大多數基于C的編程語言中，變量（更正式地說是綁定）在聲明的時候創建，然而在JavaScript中并不是這樣。在JavaScript中，變量在何處創建取決于你用什么方式聲明它。ES6提供了新的聲明方式，讓你可以更容易控制變量的作用域。接下來將說明為什么用var聲明變量容易造成困擾以及ES6的塊級綁定。

var聲明和提升（var Declarations and Hoisting）

在JavaScript中，用var做變量聲明相當于在函數頂部聲明變量（如果在函數外面聲明，那么變量擁有全局作用域），而不管這個變量實際上在何處聲明，這稱為提升（hoisting）。下面的例子可以說明什么是提升：

function getValue(condition) {if (condition) {var value = "blue";return value;} else {//在這里value是可以被訪問，值為undefinedreturn null;}//在這里value是可以被訪問，值為undefined }

如果你不了解JavaScript，你可能認為變量value只有在condition為true的時候才被創建。但實際上變量value無論如何也會被創建。上面這段代碼實際上與下面這段代碼效果一樣：

function getValue(condition) {var value;if (condition) {value = "blue";return value;} else {return null;} }

可以看到，value的聲明被提升到函數頂部，但是仍然在初始的位置完成初始化操作。這意味著變量value在else分支也可以被訪問到，但在else中訪問value其值為undefined因為在else塊中并沒有初始化value。變量提升通常給JavaScript新手帶來困惑，并且在實際項目帶來bug。因為這個原因，ES6提供了塊級作用域選項讓開發者更好的控制變量的生命周期。

塊級聲明（Block-Level Declarations）

塊級聲明的含義是：在變量聲明的塊作用域外，不能訪問此變量。塊級聲明以下面兩種方式聲明：

　　（1）在函數內聲明

　　（2）在塊內聲明（以{}包含）

很多基于C的語言都支持塊級聲明，ES6提供塊級聲明也是想讓開發者擁有同樣的開發靈活性。

let聲明（let Declarations）

let的聲明語言和var的聲明語言是一樣的。你可以將代碼中的var用let替換，從而將變量的作用范圍限制在當前塊內。用let聲明的變量不會被提升到塊的頂部。最好是在塊的最開始部分用let聲明變量，這樣在整個塊內就都能訪問到變量。來看下面的示例代碼：

function getValue(condition) {if (condition) {let value = "blue";return value;} else {//在這里value不能被訪問return null;}//在這里value不能被訪問 }

上面的getValue函數實際上很像我們在其他基于C的語言中聲明的函數。value變量是用let聲明的，不會被提升，所以現在只能在if塊內訪問到value變量。如果condition為false，那么value變量永遠也不會被聲明或初始化。

禁止重復聲明（No Redeclaration）

?如果某個變量已經在作用域內聲明，那么用let再次聲明這個變量，就會報錯。請看下面的代碼：

var count = 30;let count = 40; //報錯

在上面的代碼中，count被聲明兩次：var和let各聲明一次。因為let不能重復定義一個已經存在的變量，所以上面的代碼會拋出錯誤。但是如果let是在自己塊內聲明一個同名變量，將不會報錯：

var count = 30;if (condition) {let count = 40; //沒有報錯 }

?這里let定義count變量不會報錯，是因為它在if塊內創建的，而不是在外部的塊。在if塊內訪問count的值為40，而不是外面的30。這與C/C++等語言的作用方式是一樣的。

常量聲明（const Declarations）

ES6支持用關鍵字const作常量聲明。用const聲明的變量在初始化后不能被修改。每個const變量在聲明時必須被初始化，看下面的代碼：

const maxItems = 30;const name; //語法錯誤，name沒被初始化

?maxItens在聲明時被初始化，而name在聲明時未被初始化，因而會報錯。

常量聲明 vs let聲明（Constants vs. let Declarations）

const聲明和let聲明一樣，都是塊級聲明，也就是說在塊內用const聲明的變量無法在塊外被訪問。const聲明的變量也不會被提升。看下面的代碼：

if (condition) {const maxItems = 5; } //這里不能訪問到maxItems變量

?const另外一個與let相似的性質是，在作用域內也不能重復聲明變量。不管這個變量是用var還是let聲明的。看下面的代碼：

var message = "Hello"; let age = 25;//下面兩句都會報錯 const message = "Goodbye!"; const age = 30;

在這些相似的性質之外，const和let之間還有一個重要的不同之處。對一個已經用const聲明的變量賦值會報錯，不管是strict還是non-strict模式：

const maxItems = 5;maxItems = 5; //報錯

const聲明對象（Object Declarations with const）

const聲明的對象可以修改對象的屬性，看下面的代碼：

const person = {name: "Nicholas" };person.name = "Greg"; //沒問題//報錯 person = {name: "Greg" };

簡單的說就是用const聲明的變量，本身綁定的值不能變，但是指向的對象卻是可以修改的。

總結

以上是生活随笔為你收集整理的《理解 ES6》阅读整理：块绑定（Block Binding）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。