JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのObject.freeze()でオブジェクトを凍結する方法を徹底解説

実際の開発の世界において、JavaScriptには他のプログラミング言語に見られるような従来のクラスの仕組みが存在しません。JavaScriptの中核をなしているのは「オブジェクト」と「コンストラクター」です。数あるコンストラクターメソッドの中でも、Object.freeze()はオブジェクトを「凍結（フリーズ）」するために使われる便利なメソッドです。

オブジェクトを凍結すると、新しいプロパティの追加ができなくなり、既存のプロパティを変更することもできなくなります。Object.freeze()は、オブジェクトが持つ列挙可能性（enumerable）、構成可能性（configurable）、書き込み可能性（writable）といった各属性や、プロトタイプをそのまま維持しようとします。凍結されたコピーを新たに作成するのではなく、元のオブジェクト自体を凍結する点に注意しましょう。

Object.freeze()の主な用途

1) freeze()は、オブジェクトや配列を凍結するために使用されます。

2) freeze()は、オブジェクトを不変（イミュータブル）な状態にするために使用されます。

構文

Object.freeze(obj)

使用例

<html>
<body>
<script>
// オブジェクトを作成し、値を代入する
    var myObj1 = {
                prop1: 'freezed values can not be changed'
                };

// 作成したオブジェクトを凍結する
    var myObj2 = Object.freeze(myObj1);

// 凍結されたオブジェクトのプロパティを更新しようとする
    myObj2.prop1 = 'change the freezed value';

// 凍結されたオブジェクトのプロパティを表示する -->
    document.write(myObj2.prop1);

</script>
</body>
</html>

実行結果

freezed values can not be changed

補足：凍結時の挙動と注意点

凍結されたオブジェクトのプロパティを変更しようとした場合、その挙動はモードによって異なります。厳格モード（"use strict"）ではTypeErrorがスローされますが、非厳格モードではエラーが発生せず、代入が単に無視されます。上記の例では代入が失敗するため、元の値「freezed values can not be changed」がそのまま表示されるというわけです。

また、オブジェクトが凍結されているかどうかを確認したい場合は、Object.isFrozen()メソッドを使用すると便利です。さらに、Object.freeze()による凍結は「浅い（shallow）凍結」であるため、ネストされた内部のオブジェクトまでは凍結されない点にも注意が必要です。ネストされたオブジェクトごと凍結したい場合は、再帰的にfreeze()を適用する必要があります。


  1. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /