コンテンツへスキップ
JavaScript でのオブジェクトのシール、フリーズ、拡張の防止

JavaScript でのオブジェクトのシール、フリーズ、拡張の防止

InfragisticsのIgnite UI for JavaScriptを使用して、JavaScriptのオブジェクトの拡張をシール、フリーズ、および防止する方法を学びます

5min read

現代の JavaScript では、オブジェクトは不可欠であり、より優れた JavaScript を書くためには、オブジェクトを取り巻くトピックを深く理解することが必要です。JavaScript では、4 つの方法でオブジェクトを作成できます。

オブジェクトの作成方法がわかったら、オブジェクトプロパティ記述子について学びたいと思うかもしれません。 まとめとして、オブジェクト -cat があるとします。

var cat = {
    name: 'foo',
    age: 9
}

各オブジェクト プロパティには、値以外にも多くの情報が含まれています。たとえば、Object.getOwnPropertyDescriptorメソッドを使用して、他のプロパティ情報を印刷できます

console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

コンソールでは、プロパティ名が詳細情報を提供していることがわかります。

コンソールでは、プロパティ名が詳細情報を提供していることがわかります

非常に明確であるように、 writableがtrueに設定されている場合は、プロパティ値などを書き換えることができます。

今のところ、オブジェクトプロパティ記述子についてはご存知でしょうので、プロパティを読み取り専用にする必要がある場合は、プロパティを writablefalseに設定します。

Object.defineProperty(cat, 'name', { writable: false });

次に、JavaScript オブジェクトのデフォルトの動作を変更するためのいくつかの要件について説明します。

  1. オブジェクトが新しいプロパティを持たないようにする
  2. 要件 1 に加えて、構成可能なすべてのプロパティを false にマークします
  3. 要件 2 に加えて、すべてのプロパティを false に書き込み可能にします

ECMA 6 以降では、上記の要件を満たす方法があります。それらを一つずつ見ていきましょう。

Object.preventExtensions

例えば、猫というオブジェクトがあるとします。

var cat = {
    name: 'foo',
    age: 9
}

[デフォルトの動作] では、JavaScript オブジェクトにプロパティを追加できます。したがって、以下の操作が可能です。

cat.color = 'black';
console.log(cat.color); // black

デフォルトの動作でオブジェクトが動的にプロパティを追加しないようにするには、Object.preventExtensions()を使用する必要があります。このメソッドは、オブジェクトに新しいプロパティが追加されるのを防ぎます。

Object.preventExtensions(cat);
cat.color = 'black';
console.log(cat.color); // undefined

オブジェクトでObject.preventExtensionsを使用した後、新しいプロパティの色を追加すると、JavaScript はそれを無視し、出力としてundefinedになります。

JavaScript が厳格モードの場合、拡張不可能なオブジェクトに新しいプロパティを追加するとエラーが発生します。

'use strict'
var cat = {
 
    name: 'foo',
    age: 9
}
 
Object.preventExtensions(cat);
cat.color = 'black';
console.log(cat.color); // error thrown 

厳密モードでは、「プロパティを追加できません。オブジェクトは拡張可能ではありません」という非常に明確なメッセージでエラーが発生します

厳密モードでは、「プロパティを追加できません。オブジェクトは拡張可能ではありません」という非常に明確なメッセージでエラーが発生します

要約すると、object.preventExtensionsメソッドを使用して、オブジェクトに新しいプロパティが追加されないようにする必要があります。

オブジェクト.シール

例えば、オブジェクトをシールしたいとします。

  • 新しいプロパティを追加することはできません (object.preventExtensions() を呼び出してください)。
  • 構成は変更しないでください (構成可能なプロパティを false に設定)

object.seal() メソッドを使用してオブジェクトをシールできます。 もう一度、オブジェクトである猫について考えてみましょう。

var cat = {
 
    name: 'foo',
    age: 9
}

新しいプロパティを cat に追加する必要はなく、すべてのプロパティを configurable を false に設定する必要があります。これを行うには、 object.seal() メソッドを使用します。

Object.seal(cat);
cat.color = 'black';
console.log(cat.color); // undefined
console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

sealed オブジェクトがあるため、出力として undefined および configurable が false に設定されます。

sealed オブジェクトがあるため、出力として undefined および configurable が false に設定されます。

要約すると、Object.seal() を使用してオブジェクトをシールする必要があります。新しいプロパティを追加することはできず、configurable は false に設定されます。

Object.freeze

オブジェクトをフリーズしたいとします。

  • 新しいプロパティを追加することはできません。つまり、object.preventExtensions() を呼び出す必要があります
  • 構成は変更しないでください (構成可能なプロパティを false に設定)
  • すべてのプロパティで、 writable を false に設定する必要があります

オブジェクトをフリーズするには、Object.freeze() メソッドを使用します。 基本的には Object.seal() メソッドを呼び出し、 writable プロパティを false に設定します。

オブジェクト - 猫について考えてみましょう。

var cat = {
    name: 'foo',
    age: 9
}

新しいプロパティをオブジェクトに追加せず、すべてのプロパティの configurable を false に設定し、プロパティの writable を false に設定する必要があります。これを行うには、 object.freeze() メソッドを使用します。

Object.freeze(cat);
cat.age = 10;
cat.color = 'black';
console.log(cat.age); //9
console.log(cat.color); // undefined
console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

オブジェクトをフリーズしたため、出力として、 undefined、 9、 configurable 、 writableがfalseに設定されます。

オブジェクトをフリーズしたため、出力として、 undefined、 9、 configurable 、 writableがfalseに設定されます。

要約すると、Object.freeze() を使用してオブジェクトをフリーズする必要があります。オブジェクトをフリーズすると、新しいプロパティを追加したり、プロパティの値を書き換えたりできなくなり、configurable は false に設定されます。

概要

JavaScript でオブジェクトを操作する際には、オブジェクトを作成するさまざまな方法を深く理解する必要があります。プロパティ記述子、Object.seal、Object.preventExtensions、および Object.freeze が大いに必要です。これらの概念をよりよく理解していただければ幸いです。

デモを予約