【解説】JavaScriptのプロパティディスクリプターとは？

記事内に広告を含みます

【解説】JavaScriptのプロパティディスクリプターとは？
【解説】JavaScriptのプロパティディスクリプターとは？：まとめ

【解説】JavaScriptのプロパティディスクリプターとは？

JavaScriptのプロパティディスクリプターは、オブジェクトのプロパティの属性を制御・確認できるものです。

・属性の種類

・確認方法

・変更方法

・すべてのプロパティに対してする方法

順に解説してきます。

・属性の種類

プロパティの属性の種類にはこれらがあります。

value	値
writable	値が変更可能かどうかを示す（true ／ false）
enumerable	列挙可能かどうかを示す（`for...in` や `Object.keys` で表示されるかどうか）
configurable	定義の変更や、削除可能かどうかを示す

・確認方法

属性の値を確認する方法は、Object.getOwnPropertyDescriptorメソッドを使えば可能です。

書き方がこちら↓

Object.getOwnPropertyDescriptor(オブジェクト名, 'プロパティ名を文字列で');

例として下記コードを実行すると、こんな出力結果がでます。

const test01 = {
  color: 'red',
};

const test02 = Object.getOwnPropertyDescriptor(test01, 'color');
console.log(test02);

//出力結果

configurable: true
enumerable: true
value: "red"
writable: true

これで設定の内容を確認することができます。

・変更方法

属性の設定項目を変更するには、Object.definePropertyメソッドを使えば可能です。

書き方がこちら↓

Object.defineProperty(オブジェクト名, 'プロパティ名を文字列で', {
  設定項目
});

例として下記コードを実行してみました。

const test01 = {
  color: 'red',
};

const test02 = Object.defineProperty(test01, 'color', {
  value: 'blue',
  writable: false, // 値の変更を禁止
  enumerable: true,
  configurable: true
})
console.log(test01.color); //blue

test01.color = 'orange';
console.log(test01.color); // TypeError: Cannot assign to read only property

・すべてのプロパティに対してする方法

すべてのプロパティに対して設定を確認するには、Object.getOwnPropertyDescriptorsメソッドを使えば可能です。

書き方がこちら↓

Object.getOwnPropertyDescriptors(オブジェクト名);

例として下記コードを実行してみました。

const test01 = {
  color: 'red',
  size: 'big',
};

const test02 = Object.getOwnPropertyDescriptors(test01);
console.log(test02);

//出力結果
{
  "color": {
      "value": "red",
      "writable": true,
      "enumerable": true,
      "configurable": true
  },
  "size": {
      "value": "big",
      "writable": true,
      "enumerable": true,
      "configurable": true
  }
}

すべてのプロパティに対して設定を変更するには、Object.definePropertiesメソッドを使えば可能です。

書き方がこちら↓

Object.defineProperties(オブジェクト名, {
  設定項目
});

例として下記コードを実行してみました。

Object.defineProperties(test01, {
  color: {
    value: "blue",
    writable: false,
    enumerable: true,
    configurable: true
  },
  size: {
    value: 'small',
    writable: true,
    enumerable: true,
    configurable: false
  }
});