javascript オブジェクトのプロパティの追加を禁止する

javascript オブジェクトのプロパティの追加を禁止する

javascriptで、preventExtensionsを使用して、オブジェクトへのプロパティの追加を禁止するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114

preventExtensions使い方

preventExtensionsを使用すると、オブジェクトへのプロパティの追加を禁止することが可能です。

以下のようにオブジェクトのプロパティを追加するコードがあった場合、

const human = {
  name: 'tanaka',
  age: 30
};

human.tel = 123123123;

console.log(
  human.tel
); // 123123123

「preventExtensions」を使用すると追加できなくなります。

const human = {
  name: 'tanaka',
  age: 30
};

Object.preventExtensions(human);

human.tel = 123123123;

console.log(
  human.tel
); // undefined

use strictを指定すると、preventExtensions後にプロパティを追加しようとするとエラーとなります。

'use strict';

const human = {
  name: 'tanaka',
  age: 30
};

Object.preventExtensions(human);

human.tel = 123123123; // エラー

エラー内容

Uncaught TypeError: Cannot add property tel, object is not extensible

firefox102の場合は、以下のエラーが発生します。

Uncaught TypeError: can't define property "tel": Object is not extensible

また、削除や更新は可能となります。

'use strict';

const human = {
  name: 'tanaka',
  age: 30
};

Object.preventExtensions(human);

human.name = "suzuki";

delete human.age;

console.log(
  human  
);

実行結果

プロパティが追加できるかを確認するには「isExtensible」を使用します。

const human = {
  name: 'tanaka',
  age: 30
};

console.log(
  Object.isExtensible(human) // true
);

Object.preventExtensions(human);

console.log(
  Object.isExtensible(human) // false
);

配列に使用

配列に使用するとオブジェクトと同じ挙動になります。

let arr = ["aaa","bbb"]

arr[2] = "ccc"

console.log(
    arr // ['aaa', 'bbb', 'ccc']
);

Object.preventExtensions(arr); // 追加禁止

arr[3] = "ddd"

console.log(
    arr // ['aaa', 'bbb', 'ccc']
);

「use strict」を使用すると、エラーが発生するところも同じです。

'use strict';

let arr = ["aaa","bbb"]

arr[2] = "ccc"

console.log(
    arr // ['aaa', 'bbb', 'ccc']
);

Object.preventExtensions(arr); // 追加禁止

arr[3] = "ddd" // Uncaught TypeError: Cannot add property 3, object is not extensible

console.log(
    arr // ['aaa', 'bbb', 'ccc']
);