NEW ARTICLE
PyCharm 最近の変更を一覧表示するショートカットキー
  1. HOME
  2. javascript
  3. javascript definePropertyを使用してオブジェクトを書き込み・削除不可にする

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

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

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

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114
Javascript サンプル集はこちら
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について
'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>'

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

Uncaught TypeError: "hoge" is read-only

safari15.5の場合は、以下のエラーとなります。

TypeError: Attempted to assign to readonly property.

設定状況確認

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

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

実行結果