ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript での Object.freeze() と Object.seal() のマスター: オブジェクトの可変性の制御

JavaScript での Object.freeze() と Object.seal() のマスター: オブジェクトの可変性の制御

Barbara Streisand
リリース: 2024-12-28 17:58:18
オリジナル
366 人が閲覧しました

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

JavaScript の Object.freeze と Object.seal

JavaScript でオブジェクトを操作する場合、意図しない変更を防ぐためにその変更可能性を制御することが不可欠です。この目的のために JavaScript によって提供される 2 つのメソッドは、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() は既存のプロパティ値の変更を許可することで柔軟性を提供します。適切な方法の選択は、オブジェクトに対して必要な制御のレベルによって異なります。 こんにちは、アバイ・シン・カタヤットです! 私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。 ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript での Object.freeze() と Object.seal() のマスター: オブジェクトの可変性の制御の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート