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

JavaScriptのObject.seal()とObject.freeze()の違いとは？オブジェクトの変更制御を徹底解説

Object.seal()とObject.freeze()の最大の違いは、「既存プロパティの値変更を許すかどうか」という点にあります。Object.seal()は既存プロパティの値変更を許可しますが、Object.freeze()はオブジェクトへの一切の変更を許しません。つまり、Object.freeze()で凍結されたオブジェクトは、どんな些細な変更からも完全に保護された（イミュータブルな）状態になります。

Object.seal()とは

Object.seal()メソッドは、既存プロパティの削除や新規プロパティの追加を防ぎます。しかし、既存プロパティの値そのものまでは保護されず、外部からの値の書き換えは可能です。

サンプルコード

次の例では、Object.seal()メソッドによって、delete演算子を使ってもユーザー定義のプロパティ「prop1」は削除されません。一方で、プロパティ「prop1」の値のみが更新されています。

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.seal(object1);
   object1.prop1 = 2; // 値が変更される
   delete object1.prop1;
   document.write(object1.prop1); // sealされているため「2」と表示される
</script>
</body>
</html>

実行結果

2


Object.freeze()とは

Object.freeze()メソッドは、Object.seal()の機能に加えて、既存プロパティの値変更まで防ぎます。オブジェクトを完全に不変（イミュータブル）な状態として扱いたい場合に最適なメソッドです。なお、strictモード下で凍結されたオブジェクトを変更しようとするとTypeErrorが発生することにも注意してください。

サンプルコード

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.freeze(object1);
   object1.prop1 = 2; // 値の更新は無視される
   delete object1.prop1; // プロパティの削除も無視される
   document.write(object1.prop1); // 値を2に更新しても出力は「1」
</script>
</body>
</html>

実行結果

1

両者の違いまとめ

どちらのメソッドを選ぶべきか迷ったときは、以下の比較表を参考にしてください。

操作Object.seal()Object.freeze()
新規プロパティの追加不可不可
既存プロパティの削除不可不可
既存プロパティの値変更可不可

このように、プロパティ構造は固定しつつ値の更新は許したい場合はObject.seal()を、オブジェクト全体を読み取り専用にしたい場合はObject.freeze()を使い分けるのがおすすめです。

  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方