原生JavaScript創(chuàng)建不可變對(duì)象的方法簡(jiǎn)單示例
本文實(shí)例講述了原生JavaScript創(chuàng)建不可變對(duì)象的方法。分享給大家供大家參考,具體如下:
Javascript是一種靈活的語(yǔ)言,你可以重新定義任何東西,但是當(dāng)項(xiàng)目變得復(fù)雜時(shí),我們會(huì)發(fā)現(xiàn)可變數(shù)據(jù)結(jié)構(gòu)的問(wèn)題。隨著JavaScript的最新版本的發(fā)布這種情況發(fā)生了改變。現(xiàn)在可以創(chuàng)建不可變的對(duì)象了。本文介紹如何用三種不同的方法來(lái)做。
對(duì)象的不變性意味著我們不希望對(duì)象在創(chuàng)建后即以任何方式更改(將它們?cè)O(shè)置為只讀類型)。
假設(shè)我們需要定義一個(gè) car 對(duì)象,并在整個(gè)項(xiàng)目中使用它的屬性來(lái)執(zhí)行操作。我們不能允許錯(cuò)誤地修改任何數(shù)據(jù)。
const myTesla = { maxSpeed: 155, batteryLife: 300, weight: 2300};Object.preventExtensions() 防止擴(kuò)展
此方法可防止向現(xiàn)有對(duì)象添加新屬性,preventExtensions() 是不可逆的操作,我們永遠(yuǎn)不能再向?qū)ο筇砑宇~外的屬性。
Object.isExtensible(myTesla); // trueObject.preventExtensions(myTesla);Object.isExtensible(myTesla); // falsemyTesla.color = ’blue’;console.log(myTesla.color) // undefinedObject.seal() 密封
它可以防止添加或刪除屬性,seal() 還可以防止修改屬性描述符。
Object.isSealed(myTesla); // falseObject.seal(myTesla);Object.isSealed(myTesla); // truemyTesla.color = ’blue’;console.log(myTesla.color); // undefineddelete myTesla.batteryLife; // falseconsole.log(myTesla.batteryLife); // 300Object.defineProperty(myTesla, ’batteryLife’); // TypeError: Cannot redefine property: batteryLifeObject.freeze() 凍結(jié)
它的作用與 Object.seal() 相同,而且它使屬性不可寫。
Object.isFrozen(myTesla); // falseObject.freeze(myTesla);Object.isFrozen(myTesla); // truemyTesla.color = ’blue’;console.log(myTesla.color); // undefineddelete myTesla.batteryLife;console.log(myTesla.batteryLife); // 300Object.defineProperty(myTesla, ’batteryLife’); // TypeError: Cannot redefine property: batteryLifemyTesla.batteryLife = 400;console.log(myTesla.batteryLife); // 300提示
如果希望在嘗試修改不可變對(duì)象時(shí)拋出錯(cuò)誤,請(qǐng)使用嚴(yán)格模式。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章:
1. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)2. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案3. 告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單4. 使用純HTML的通用數(shù)據(jù)管理和服務(wù)5. CSS hack用法案例詳解6. css代碼優(yōu)化的12個(gè)技巧7. css進(jìn)階學(xué)習(xí) 選擇符8. HTML DOM setInterval和clearInterval方法案例詳解9. 使用css實(shí)現(xiàn)全兼容tooltip提示框10. Vue+elementUI下拉框自定義顏色選擇器方式
