JS?ES5創(chuàng)建常量詳解
前言
ES6
剛推出的時(shí)候,let
和const
應(yīng)該是大多數(shù)人學(xué)習(xí)ES6
的第一個(gè)知識(shí)點(diǎn)。
其中const
可以用來定義 常量 ,將不需要改變的數(shù)據(jù)定義成一個(gè)常量。
但其實(shí)在ES6
之前我們也是有辦法定義常量的。
ES 5 創(chuàng)建常量
Object.defineProperty 的基礎(chǔ)用法
在ES6
之前是沒有const
的,如果需要定義常量,可以使用Object.defineProperty
。
很多人知道Vue2
使用 Object.defineProperty
監(jiān)聽數(shù)據(jù)變化,但不一定知道 Object.defineProperty
也可以用來定義常量。
Object.defineProperty
方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性,或者修改一個(gè)對(duì)象的現(xiàn)有屬性,并返回此對(duì)象。Object.defineProperty(obj, prop, descriptor)
接收3個(gè)參數(shù)
- obj: 要定義屬性的對(duì)象。
- prop: 要定義或修改的屬性的名稱或
Symbol
。 - descriptor: 要定義或修改的屬性描述符。
舉個(gè)例子:
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
就可以用來定義該對(duì)象是否允許被修改,默認(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
上定義一個(gè)屬性,而且該屬性是全局的,定義后在什么地方都能調(diào)用。
Object.defineProperty(window, 'NAME', { value: '雷猴' }) console.log(NAME) // 輸出: 雷猴 NAME = '鯊魚辣椒' console.log(NAME) // 輸出: 雷猴 window.NAME = '蟑螂惡霸' console.log(NAME) // 輸出: 雷猴
不管如何修改,NAME
都是最開始定義的值。
常量居然可以修改值?
上面創(chuàng)建的常量,value
是一個(gè)基礎(chǔ)數(shù)據(jù)類型的值。如果換成引用類型的值,那內(nèi)容是可以修改的。
Object.defineProperty(window, 'NAME', { value: { nickname: '雷猴' } }) console.log(NAME) NAME.nickname = '鯊魚辣椒' console.log(NAME)
原因是,常量鎖定的是定義時(shí)所指向的內(nèi)存地址。
定義基礎(chǔ)數(shù)據(jù)類型時(shí),內(nèi)存地址直接指向那個(gè)值。但定義引用類型時(shí),內(nèi)存地址存的是引用地址。所以常量的定義指的是引用地址不能修改。
兼容性
使用 Object.defineProperty
定義常量時(shí)需要注意兼容性
到此這篇關(guān)于JS ES5創(chuàng)建常量詳解的文章就介紹到這了,更多相關(guān)JS ES5創(chuàng)建常量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(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)簡(jiǎn)易輪播圖最全代碼解析(ES5)
- Javascript的ES5,ES6的7種繼承詳解
相關(guān)文章
JavaScript中reduce方法的用法及使用場(chǎng)景
reduce()方法對(duì)數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡(jiǎn)單使用場(chǎng)景,需要的朋友可以參考下2023-08-08JavaScript錯(cuò)誤處理之分析 Uncaught(in promise) error的
在開發(fā)過程中,JavaScript的錯(cuò)誤處理是一個(gè)老生常談的話題,當(dāng)應(yīng)用程序發(fā)生未捕獲的異常時(shí),Uncaught(in promise) error是其中最常見的錯(cuò)誤類型,這篇文章將從多個(gè)方面詳細(xì)闡述這種錯(cuò)誤類型的原因與解決方案,感興趣的朋友一起看看吧2023-12-12js正文內(nèi)容高亮效果的實(shí)現(xiàn)方法
這篇文章介紹了js正文內(nèi)容高亮效果的實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-06-06一個(gè)對(duì)于Array的簡(jiǎn)單擴(kuò)展
一個(gè)對(duì)于Array的簡(jiǎn)單擴(kuò)展...2006-10-10解決Babylon.js中AudioContext was not allowed&nbs
這篇文章主要介紹了解決Babylon.js中AudioContext was not allowed to start異常問題方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04JavaScript數(shù)組各種常見用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)組各種常見用法實(shí)例分析,包括數(shù)組的添加、刪除、替換、還原等常見技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08laypage+SpringMVC實(shí)現(xiàn)后端分頁
這篇文章主要為大家詳細(xì)介紹了laypage+SpringMVC實(shí)現(xiàn)后端分頁,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07[Web]防止用戶復(fù)制頁面內(nèi)容和另存頁面的方法
原理就是利用js控制一些復(fù)制等事件,但破解也簡(jiǎn)單,這里就不說了。2009-02-02JS實(shí)現(xiàn)數(shù)組去重的11種方法總結(jié)
去重是開發(fā)中經(jīng)常會(huì)碰到的一個(gè)熱點(diǎn)問題,這篇文章主要介紹了JS中實(shí)現(xiàn)數(shù)組去重的11個(gè)方法總結(jié),文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-04-04