首頁 >web前端 >js教程 >掌握 JavaScript 中的 Object.freeze() 和 Object.seal():控制物件可變性

掌握 JavaScript 中的 Object.freeze() 和 Object.seal():控制物件可變性

Barbara Streisand
Barbara Streisand原創
2024-12-28 17:58:18395瀏覽

Mastering Object.freeze() and Object.seal() in JavaScript: Controlling Object Mutability

JavaScript 中的 Object.freeze 和 Object.seal

在 JavaScript 中使用物件時,控制其可變性對於防止意外變更至關重要​​。 JavaScript 為此提供了兩種方法:Object.freeze()Object.seal()。了解它們的差異和用例是編寫健全程式碼的關鍵。


1. Object.freeze()

Object.freeze() 方法使物件不可變。這意味著:

  • 無法新增屬性。
  • 現有屬性無法修改、刪除或重新配置。
  • 該物件實際上被「凍結」並且不能以任何方式更改。

文法

Object.freeze(obj);

範例

const obj = { name: "Alice", age: 25 };
Object.freeze(obj);

obj.age = 30; // Does nothing (strict mode: throws an error)
obj.gender = "female"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Alice", age: 25 }

用例

  • 確保物件在整個程式中保持不變,例如配置設定。

檢查物件是否被凍結

使用 Object.isFrozen() 來決定物件是否被凍結:

console.log(Object.isFrozen(obj)); // true

2. Object.seal()

Object.seal() 方法限制物件的修改,但不如 Object.freeze() 嚴格。它允許:

  • 修改現有屬性(值可以改變)。
  • 防止新增或刪除屬性

文法

Object.seal(obj);

範例

const obj = { name: "Bob", age: 30 };
Object.seal(obj);

obj.age = 35; // Allowed: Existing properties can be modified
obj.gender = "male"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Bob", age: 35 }

用例

  • 當您想要保護物件的結構(防止新增/刪除)但仍允許變更屬性值時。

檢查物件是否被密封

使用 Object.isSealed() 判斷物件是否被密封:

Object.freeze(obj);

3. Object.freeze() 與 Object.seal() 之間的主要差異

功能 Object.freeze() Object.seal() 標題> 新增屬性
Feature Object.freeze() Object.seal()
Add new properties Not allowed Not allowed
Remove existing properties Not allowed Not allowed
Modify existing properties Not allowed Allowed
Reconfigure property descriptors Not allowed Not allowed
Use case Immutable objects (constants) Restrict structure but allow value changes
不允許
不允許

刪除現有屬性 不允許 不允許

修改現有屬性 不允許 允許

重新配置屬性描述符 不允許 不允許
const obj = { name: "Alice", age: 25 };
Object.freeze(obj);

obj.age = 30; // Does nothing (strict mode: throws an error)
obj.gender = "female"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Alice", age: 25 }
用例 不可變物件(常數) 限制結構但允許值變更 表>

4.冷凍和密封的嵌套物件
console.log(Object.isFrozen(obj)); // true

Object.freeze() 和 Object.seal() 都是淺層,這表示它們不會影響嵌套物件。要深度凍結或密封對象,您需要遞歸地將方法應用於每個嵌套對象。

  1. 範例(淺層效果)
  2. 深度冷凍助手功能
  3. 5.常見陷阱與提示

非嚴格模式行為

:在非嚴格模式下,對凍結或密封物件的變更會默默失敗。始終使用嚴格模式(“use strict”;)以便更清晰的調試。

防止與物件可變性的混淆:清楚記錄物件被凍結或密封的時間和原因,以避免在團隊環境中產生誤解。

凍結前密封

:如果你想要受限結構和不變性,請先密封對象,然後凍結它。
結論 Object.freeze() 和 Object.seal() 都是在 JavaScript 中管理物件不變性的有用工具。雖然 Object.freeze() 確保完全不變性,但 Object.seal() 透過允許更改現有屬性值來提供靈活性。選擇正確的方法取決於您對物件所需的控制等級。 嗨,我是 Abhay Singh Kathayat! 我是一名全端開發人員,擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。 請隨時透過我的商務電子郵件與我聯繫:kaashshorts28@gmail.com。

以上是掌握 JavaScript 中的 Object.freeze() 和 Object.seal():控制物件可變性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn