Object.defineProperty()の使い方

Object.defineProperty()の使い方

TypeScriptでlocation.reloadをspyOnしようとして、できなかったので色々調べていたら、Object.defineProperty()、Object.getOwnPropertyDescriptor()というメソッドを発見しました。

以下を実行します。

console.log(Object.getOwnPropertyDescriptor(window.location,'reload'));

結果は以下のようになります。configurableもwritableもfalseなんです。

Object
  configurable:false
  enumerable:true
  value:ƒ reload()
  writable:false
  __proto__:Object

各プロパティの意味は以下の通りです。

writable:falseの場合、代入することができません。

const obj = {};
Object.defineProperty(obj, 'x', {
  value : 1,
  writable : false,
  enumerable : true,
  configurable : true
});
console.log(obj.x); // ここでは１
obj.x = 2;
console.log(obj.x); // 書き込み不可なので、ここでも１

次にenumerable:falseのオブジェクトを作成してみます。列挙不可にするために、複数プロパティを定義します。その際は、Object.defineProperties()メソッドを使用します。

const obj = Object.defineProperties({}, {
  x : { value: 1, writable: true, enumerable: true, configurable: true },
  y : { value: 2, writable: true, enumerable: false, configurable: true }
});
// obj = {x:1,y:2};となる

プロパティのyはenumerable:falseなので、Object.keysなどで列挙されません。

const obj = Object.defineProperties({}, {
  x : { value: 1, writable: true, enumerable: true, configurable: true },
  y : { value: 2, writable: true, enumerable: false, configurable: true }
});
const keys = Object.keys(obj);
keys.forEach(i => {
  console.log(i);
})
// xだけ表示される
// keys.lengthは１

次にconfigurable:falseのオブジェクトを作成してみます。再定義が不可になります。

具体的には、書き込みは問題ありません。

const obj = Object.defineProperties({}, {
  x : { value: 1, writable: true, enumerable: true, configurable: true },
  y : { value: 2, writable: true, enumerable: true, configurable: false }
});
obj.y = 10;
console.log(obj.y); // 10と表示される

具体的に再定義が不可というのはどういうことかというと、どうもObject.defineProperty()などで再定義することが不可なようです。

const obj = Object.defineProperties({}, {
  x : { value: 1, writable: true, enumerable: true, configurable: true },
  y : { value: 2, writable: true, enumerable: true, configurable: false } // 再定義不可とする
});

Object.defineProperty(obj, 'x', {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
}); // これはOK

Object.defineProperty(obj, 'y', {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
}); // これはNG,再定義不可で定義しているため。

上記コードを実行すると

Uncaught TypeError: Cannot redefine property: y

というエラーが発生します。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^