前言

ES6 剛推出的時候，let和const應該是大多數(shù)人學習ES6的第一個知識點。

其中const可以用來定義 常量 ，將不需要改變的數(shù)據(jù)定義成一個常量。

但其實在ES6之前我們也是有辦法定義常量的。

ES 5 創(chuàng)建常量

Object.defineProperty 的基礎用法

在ES6之前是沒有const的，如果需要定義常量，可以使用Object.defineProperty。

很多人知道Vue2使用 Object.defineProperty監(jiān)聽數(shù)據(jù)變化，但不一定知道 Object.defineProperty也可以用來定義常量。

Object.defineProperty方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象。Object.defineProperty(obj, prop, descriptor)接收3個參數(shù)

• obj: 要定義屬性的對象。
• prop: 要定義或修改的屬性的名稱或 Symbol 。
• descriptor: 要定義或修改的屬性描述符。

舉個例子：

var LH = {}
Object.defineProperty(LH, 'name', {
  value: '雷猴'
})
console.log(LH) // 輸出: {name: '雷猴'}
LH.name = '鯊魚辣椒'
console.log(LH)  // 輸出: {name: '雷猴'}

可以將上面的代碼放到你的瀏覽器里試試。

為什么修改LH.name無效呢？因為descriptor除了value之外，還有其他屬性，比如writable就可以用來定義該對象是否允許被修改，默認是false，也就是不能修改。

所以 LH.name = '鯊魚辣椒'修改無效。

如果將writable改成true就可以修改了

var LH = {}
Object.defineProperty(LH, 'name', {
  value: '雷猴',
  writable: true // 允許修改
})
console.log(LH) // 輸出: {name: '雷猴'}
LH.name = '鯊魚辣椒'
console.log(LH)  // 輸出: {name: '鯊魚辣椒'}

創(chuàng)建常量

順著上面的思路，如果我們把LH改成window，那是不是就可以在window上定義一個屬性，而且該屬性是全局的，定義后在什么地方都能調(diào)用。

Object.defineProperty(window, 'NAME', {
  value: '雷猴'
})
console.log(NAME) // 輸出: 雷猴
NAME = '鯊魚辣椒'
console.log(NAME) // 輸出: 雷猴
window.NAME = '蟑螂惡霸'
console.log(NAME) // 輸出: 雷猴

不管如何修改，NAME 都是最開始定義的值。

常量居然可以修改值？

上面創(chuàng)建的常量，value是一個基礎數(shù)據(jù)類型的值。如果換成引用類型的值，那內(nèi)容是可以修改的。

Object.defineProperty(window, 'NAME', {
  value: {
    nickname: '雷猴'
  }
})
console.log(NAME)
NAME.nickname = '鯊魚辣椒'
console.log(NAME)

原因是，常量鎖定的是定義時所指向的內(nèi)存地址。

定義基礎數(shù)據(jù)類型時，內(nèi)存地址直接指向那個值。但定義引用類型時，內(nèi)存地址存的是引用地址。所以常量的定義指的是引用地址不能修改。

兼容性

使用 Object.defineProperty 定義常量時需要注意兼容性

到此這篇關于JS ES5創(chuàng)建常量詳解的文章就介紹到這了,更多相關JS ES5創(chuàng)建常量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論