javascript definePropertyを使用してオブジェクトを書き込み・削除不可にする

javascript definePropertyを使用してオブジェクトを書き込み・削除不可にする

javascriptで、definePropertyを使用して、オブジェクトを書き込み・削除不可にするサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 99.0.4844.84
iv>

defineProperty使い方

「defineProperty」を使用すると、オブジェクトを書き込み・削除不可に設定することが可能です。

以下のようにオブジェクトのプロパティを変更したり削除するコードを

const obj = {
  hoge: 1
};

obj.hoge = 2;

console.log(
  obj.hoge
); // 2

obj.hoge = 3;

console.log(
  obj.hoge
); // 2

delete obj.hoge;

console.log(
  obj.hoge
); // undefined

「defineProperty」を使用すると書き換えも、削除もできなくなります。

const obj = {
  hoge: 1
};

Object.defineProperty(obj, 'hoge', {
  value: 2,
  writable: false, // 書き換え禁止
  configurable: false // 属性の変更およびプロパティ削除禁止
});

console.log(
  obj.hoge
); // 2

obj.hoge = 3;

console.log(
  obj.hoge
); // 2

// 削除
delete obj.hoge;

console.log(
  obj.hoge
); // 2

use strict指定

「use strict」を指定すると、「defineProperty」後にオブジェクトを書き換えしようとするとエラーとなります。

'use strict';

const obj = {
  hoge: 1
};

Object.defineProperty(obj, 'hoge', {
  value: 2,
  writable: false, // 書き換え禁止
  configurable: false // 属性の変更およびプロパティ削除禁止
});

console.log(
  obj.hoge
); // 2

obj.hoge = 3;
console.log(
  obj.hoge
);

エラー内容

Uncaught TypeError: Cannot assign to read only property 'hoge' of object '#<Object>'

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

Uncaught TypeError: "hoge" is read-only

設定状況確認

現在設定されている情報は、以下で確認可能です。

console.log(
  Object.getOwnPropertyDescriptors(obj)
);

実行結果