javascriptのObject.defineProperty()について

Object.defineProperty()とは

あるオブジェクトに新しいプロパティを直接定義したり、オブジェクトの既存のプロパティを変更したりして、そのオブジェクトを返します。(出典:MDN

と言っても何がいい害かわからないので、実際にコードを書いてみることにする。

書き方

const obj = {
    age: 12
}
const descriptor = {
    value: "john",
    writable: true
}

Object.defineProperty(obj, 'name', descriptor)
console.log(obj.name) // "john" 

ほぼmdnでの例文で数字を変えただけであるが、今何が起きているのかを一つつづ説明すると...

① オブジェクトの宣言

const obj = {
    age: 12
}

ここではageというkeyを持つオブジェクトを宣言した。
ここにnameというkeyを持つプロパティを追加するにはどうすれば良いか。
その時使うのがdefineProperty()である。
言葉そのどおり、プロパティを宣言するメソッドである。

② defineProperty()の引数を入れる

Object.defineProperty(<対象となるオブジェクト>, <プロパティ名>, <プロパティの詳細>)

引数は3つまで入れることができ、それぞれ「対象となるオブジェクト」、「プロパティ名」、「プロパティの詳細」を入れることができて、全て必須である。
なおこのメソッドの返り値は対象となるオブジェクトそのものとなる。

descriptorについて

const descriptor = {
    value: "john",
    writable: true,
    enumerable: false,
    configurable: true
}

descriptorは例文に書いてあるvaleやwritable以外にenumerableとconfigurableがあり、value以外は全てbooleanになる。
書く項目については以下の通りである。

value

プロパティに対する値を意味する。
例文では"name"というプロパティに"john"という値を指定

writable

ここがfalseの場合、該当のプロパティはreadonlyになる

enumerable

ここがfalseの場合、該当のプロパティをループ(for文やObject.keys()を利用すること)させることができない

configurable

ここがfalseの場合、該当のプロパティを再定義することができない

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です