搞懂 JavaScript的Object.freeze, Object.seal, Object.preventExtensions 到底在幹嘛

簡單來說,這三個Object的methods都是用來「鎖定」物件,讓物件無法被修改或刪除屬性(props),但各自有不同的影響範疇:

可新增屬性可刪除屬性可修改屬性
preventExtensions
seal
freeze

用一個簡單的例子來一步一步說明

先建立一個物件,在正常情況之下,我們可以任意新增、修改、刪除物件中的屬性:

然後我們用Object.preventExtensions(obj)來限制擴展,就會發現當我們嘗試要新增屬性時不會發生作用:

接著我們用Object.seal(obj)來防止新增並限制刪除,此時物件僅剩下可修改既有屬性的功能:

接著再以Object.freeze(obj)來鎖定物件,便會發現物件已無法再做任何修改:

對於子物件的影響

這三個methods執行後,都不會影響子物件的任何操作。

如何解除?

答案是沒辦法。一旦鎖定過的部分,就無法回頭。也就是說,當你執行過freeze,即便再執行一次seal,還是會整個都鎖定住。

不過,關於解除,如果只是一個簡單的Object,還可以用Object.assign來clone一份:
obj = Object.assign({}, obj);

但如果是Class, Proxy…etc. 就沒辦法這麼簡單去做一個類似復原的動作了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料