在原生JavaScript中建立不可變對象

Javascript是一種靈活的語言，你能夠從新定義任何東西，可是當項目變得複雜時，咱們會發現可變數據結構的問題。隨着JavaScript的最新版本的發佈這種狀況發生了改變。如今能夠建立不可變的對象了。本文介紹如何用三種不一樣的方法來作。

對象的不變性意味着咱們不但願對象在建立後即以任何方式更改（將它們設置爲只讀類型）。

假設咱們須要定義一個 car 對象，並在整個項目中使用它的屬性來執行操做。咱們不能容許錯誤地修改任何數據。

const myTesla = {
 maxSpeed: 155,
 batteryLife: 300,
 weight: 2300
};

Object.preventExtensions() 防止擴展

此方法可防止向現有對象添加新屬性，preventExtensions() 是不可逆的操做，咱們永遠不能再向對象添加額外的屬性。

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() 凍結

它的做用與 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

提示

若是但願在嘗試修改不可變對象時拋出錯誤，請使用嚴格模式。

---

聚焦大前端技術和程序員成長，若是對你有所啓發和幫助，能夠點個關注、收藏，也能夠留言討論，這是對做者的最大鼓勵。

做者簡介：Web前端工程師，全棧開發工程師、持續學習者。