天天看點

ES6入門之let,cost,var

let聲明

聲明變量的三種方式:var、let、const,其中let和const為ES6新增

let與var的作用差不多,但存在着一些差別

1、 作用域(最顯著的差別)

let聲明的範圍是塊作用域,var聲明的範圍是函數作用域

ES6入門之let,cost,var

Let聲明的變量的作用域被限制在塊中,即一對花括号中

2、 暫時性死區

var聲明的變量存在“變量提升”,而let不存在“變量提升”。

變量提升:JavaScript 引擎的工作方式是,先解析代碼,擷取所有被聲明的變量,然後再一行一行地運作。這就使得所有的變量聲明語句,都會被提升到代碼的頭部,這就叫做變量提升

ES6入門之let,cost,var

var聲明的變量會被自動提升到函數作用域頂部,是以上面代碼不會報錯,輸出的是undefined,而換成let,由于其不存在“變量提升”是以會直接報錯。

ES6入門之let,cost,var

在代碼塊内,使用let指令聲明變量之前,該變量都是不可用的,這被稱為“暫時性死區”,即在let聲明age變量之前,都屬于age變量的“死區”

3、 全局聲明

使用let在全局作用域中聲明的變量不會成為window對象的屬性(var聲明的變量則會)

ES6入門之let,cost,var

4、 重複聲明

let不允許在相同作用域内,重複聲明同一個變量(var重複聲明會被忽略,當成指派語句)

ES6入門之let,cost,var

Const聲明

const與let基本相同,唯一的差別在于const聲明變量時必須同時初始化,且一旦聲明,常量的值就不能改變,嘗試修改會報錯

ES6入門之let,cost,var

本質:const實際上保證的是const變量所指向的那個記憶體位址所儲存的資料不得改動。對于簡單類型的資料(數值、字元串、布爾值),值就儲存在變量指向的那個記憶體位址,是以等同于常量。但對于複合類型的資料(主要是對象和數組),變量指向的記憶體位址,儲存的隻是一個指向實際資料的指針,const隻能保證這個指針是固定的,至于它指向的資料結構是不是可變的,就完全不能控制了。換句話說,如果const變量引用的是一-個對象,那麼修改這個對象中的屬性并不違反const的限制。(指針不發生改變)

ES6入門之let,cost,var

如果想将對象當機,應該使用Object.freeze方法。

ES6入門之let,cost,var

總結

let和const與var的差別在于塊作用域、不存在變量提升、不能重複聲明以及不會成為window的屬性。最佳實踐:不使用var,const優先,let次之。使用const聲明可以讓浏覽器運作時強制保持變量不變,也可以讓靜态代碼分析工具提前發現不合法的指派操作。隻在提前知道未來會有修改時,再使用let。

繼續閱讀