原生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ā)生了改變?,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); // true Object.preventExtensions(myTesla); Object.isExtensible(myTesla); // false myTesla.color = 'blue'; console.log(myTesla.color) // undefined
Object.seal() 密封
它可以防止添加或刪除屬性,seal() 還可以防止修改屬性描述符。
Object.isSealed(myTesla); // false Object.seal(myTesla); Object.isSealed(myTesla); // true myTesla.color = 'blue'; console.log(myTesla.color); // undefined delete myTesla.batteryLife; // false console.log(myTesla.batteryLife); // 300 Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife
Object.freeze() 凍結(jié)
它的作用與 Object.seal() 相同,而且它使屬性不可寫。
Object.isFrozen(myTesla); // false Object.freeze(myTesla); Object.isFrozen(myTesla); // true myTesla.color = 'blue'; console.log(myTesla.color); // undefined delete myTesla.batteryLife; console.log(myTesla.batteryLife); // 300 Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife myTesla.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ì)有所幫助。
- js 創(chuàng)建對(duì)象的多種方式與優(yōu)缺點(diǎn)小結(jié)
- 詳解js創(chuàng)建對(duì)象的幾種方式和對(duì)象方法
- JS創(chuàng)建自定義對(duì)象的六種方法總結(jié)
- 詳解 javascript對(duì)象創(chuàng)建模式
- JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì)詳解【類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等】
- JS 創(chuàng)建對(duì)象的模式實(shí)例小結(jié)
- JS自定義對(duì)象創(chuàng)建與簡(jiǎn)單使用方法示例
- JavaScript創(chuàng)建對(duì)象的四種常用模式實(shí)例分析
- JavaScript 對(duì)象創(chuàng)建的3種方法
相關(guān)文章
Javascript 多瀏覽器兼容性問(wèn)題及解決方案
不論是網(wǎng)站應(yīng)用還是學(xué)習(xí)js,大家很注重ie與firefox等瀏覽器的兼容性問(wèn)題,畢竟這兩中瀏覽器是占了絕大多數(shù)。2009-12-12
js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Javascript 函數(shù)parseInt()轉(zhuǎn)換時(shí)出現(xiàn)bug問(wèn)題
天測(cè)試的測(cè)出來(lái)的。parseInt(1.13*100),實(shí)際返回值是112,下面有個(gè)示例,大家可以看看下2014-05-05
Json實(shí)現(xiàn)傳值到后臺(tái)代碼實(shí)例
這篇文章主要介紹了Json實(shí)現(xiàn)傳值到后臺(tái)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
javascript實(shí)現(xiàn)的文字加密解密
javascript實(shí)現(xiàn)的文字加密解密...2007-06-06
Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問(wèn)題的解決方法
這里也會(huì)遇到一次性關(guān)閉所有modal引起陰影遮罩的問(wèn)題,也就是所有modal都關(guān)閉了,但是主頁(yè)面仍然被陰影遮罩。下面通過(guò)本文給大家分享解決方案,需要的朋友參考下吧2017-02-02
Element-UI的?InfiniteScroll?無(wú)限滾動(dòng)組件基本使用及應(yīng)用場(chǎng)景
這篇文章主要介紹了Element-UI的InfiniteScroll無(wú)限滾動(dòng)組件基本使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06

