原生JavaScript創(chuàng)建不可變對象的方法簡單示例
本文實例講述了原生JavaScript創(chuàng)建不可變對象的方法。分享給大家供大家參考,具體如下:

Javascript是一種靈活的語言,你可以重新定義任何東西,但是當(dāng)項目變得復(fù)雜時,我們會發(fā)現(xiàn)可變數(shù)據(jù)結(jié)構(gòu)的問題。隨著JavaScript的最新版本的發(fā)布這種情況發(fā)生了改變。現(xiàn)在可以創(chuàng)建不可變的對象了。本文介紹如何用三種不同的方法來做。
對象的不變性意味著我們不希望對象在創(chuàng)建后即以任何方式更改(將它們設(shè)置為只讀類型)。
假設(shè)我們需要定義一個 car 對象,并在整個項目中使用它的屬性來執(zhí)行操作。我們不能允許錯誤地修改任何數(shù)據(jù)。
const myTesla = {
maxSpeed: 155,
batteryLife: 300,
weight: 2300
};
Object.preventExtensions() 防止擴(kuò)展
此方法可防止向現(xiàn)有對象添加新屬性,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
提示
如果希望在嘗試修改不可變對象時拋出錯誤,請使用嚴(yán)格模式。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- js 創(chuàng)建對象的多種方式與優(yōu)缺點(diǎn)小結(jié)
- 詳解js創(chuàng)建對象的幾種方式和對象方法
- JS創(chuàng)建自定義對象的六種方法總結(jié)
- 詳解 javascript對象創(chuàng)建模式
- JavaScript 面向?qū)ο蟪绦蛟O(shè)計詳解【類的創(chuàng)建、實例對象、構(gòu)造函數(shù)、原型等】
- JS 創(chuàng)建對象的模式實例小結(jié)
- JS自定義對象創(chuàng)建與簡單使用方法示例
- JavaScript創(chuàng)建對象的四種常用模式實例分析
- JavaScript 對象創(chuàng)建的3種方法
相關(guān)文章
Javascript 函數(shù)parseInt()轉(zhuǎn)換時出現(xiàn)bug問題
天測試的測出來的。parseInt(1.13*100),實際返回值是112,下面有個示例,大家可以看看下2014-05-05
Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題的解決方法
這里也會遇到一次性關(guān)閉所有modal引起陰影遮罩的問題,也就是所有modal都關(guān)閉了,但是主頁面仍然被陰影遮罩。下面通過本文給大家分享解決方案,需要的朋友參考下吧2017-02-02
Element-UI的?InfiniteScroll?無限滾動組件基本使用及應(yīng)用場景
這篇文章主要介紹了Element-UI的InfiniteScroll無限滾動組件基本使用,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06

