JS?ES5創(chuàng)建常量詳解
前言
ES6 剛推出的時候,let和const應(yīng)該是大多數(shù)人學(xué)習(xí)ES6的第一個知識點(diǎn)。
其中const可以用來定義 常量 ,將不需要改變的數(shù)據(jù)定義成一個常量。
但其實(shí)在ES6之前我們也是有辦法定義常量的。
ES 5 創(chuàng)建常量
Object.defineProperty 的基礎(chǔ)用法
在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無效呢?因?yàn)?code>descriptor除了value之外,還有其他屬性,比如writable就可以用來定義該對象是否允許被修改,默認(rèn)是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是一個基礎(chǔ)數(shù)據(jù)類型的值。如果換成引用類型的值,那內(nèi)容是可以修改的。
Object.defineProperty(window, 'NAME', {
value: {
nickname: '雷猴'
}
})
console.log(NAME)
NAME.nickname = '鯊魚辣椒'
console.log(NAME)原因是,常量鎖定的是定義時所指向的內(nèi)存地址。
定義基礎(chǔ)數(shù)據(jù)類型時,內(nèi)存地址直接指向那個值。但定義引用類型時,內(nèi)存地址存的是引用地址。所以常量的定義指的是引用地址不能修改。
兼容性
使用 Object.defineProperty 定義常量時需要注意兼容性

到此這篇關(guān)于JS ES5創(chuàng)建常量詳解的文章就介紹到這了,更多相關(guān)JS ES5創(chuàng)建常量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法
- js es6系列教程 - 基于new.target屬性與es5改造es6的類語法
- JavaScript設(shè)計(jì)模式之原型模式分析【ES5與ES6】
- JS實(shí)現(xiàn)集合的交集、補(bǔ)集、差集、去重運(yùn)算示例【ES5與ES6寫法】
- 詳解vue-cli+es6引入es5寫的js(兩種方法)
- js定義類的方法示例【ES5與ES6】
- 詳解JavaScript之ES5的繼承
- JavaScript實(shí)現(xiàn)簡易輪播圖最全代碼解析(ES5)
- Javascript的ES5,ES6的7種繼承詳解
相關(guān)文章
javascript實(shí)現(xiàn)簡易計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡易計(jì)算器功能,實(shí)現(xiàn)四則運(yùn)算,小數(shù)點(diǎn),回退,歸0等功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-09-09
關(guān)于VSCode格式化JS自動添加或去掉分號的問題
這篇文章主要介紹了VSCode格式化JS自動添加或去掉分號的問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
JS實(shí)現(xiàn)title標(biāo)題欄文字不間斷滾動顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)title標(biāo)題欄文字不間斷滾動顯示效果,通過javascript時間函數(shù)定時操作動態(tài)修改頁面元素實(shí)現(xiàn)滾動效果,需要的朋友可以參考下2016-09-09
ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能示例
這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能,結(jié)合實(shí)例形式分析了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05

