原生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() 防止擴展
此方法可防止向現(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代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(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é)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- js 創(chuàng)建對象的多種方式與優(yōu)缺點小結(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自定義in_array()函數(shù)實現(xiàn)方法
這篇文章主要介紹了javascript自定義in_array()函數(shù)實現(xiàn)方法,涉及javascript數(shù)組的遍歷與查找相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08videojs+swiper實現(xiàn)淘寶商品詳情輪播圖
這篇文章主要為大家詳細(xì)介紹了videojs+swiper實現(xiàn)淘寶商品詳情輪播圖,輪播翻動,視頻暫停,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能
這篇文章主要介紹了小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL
下面小編就為大家?guī)硪黄獪\談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06JavaScript中變量提升與函數(shù)提升經(jīng)典實例分析
這篇文章主要介紹了JavaScript中變量提升與函數(shù)提升,結(jié)合實例形式分析了JavaScript中的變量提升與函數(shù)提升相關(guān)原理、使用方法及操作注意事項,需要的朋友可以參考下2018-07-07javascript對JSON數(shù)據(jù)排序的3個例子
這篇文章主要介紹了javascript對JSON數(shù)據(jù)排序的3個例子的相關(guān)資料2014-04-04JS將所有對象s的屬性復(fù)制給對象r(原生js+jquery)
這篇文章主要介紹了js中將所有對象s的屬性復(fù)制給對象r的方法,原生js+jquery分別實現(xiàn)2014-01-01