【JavaScript】 definePropertyメソッドとは？通常のプロパティ追加との違い

JavaScriptはオブジェクトにプロパティを追加する簡単な構文がありますが、それとは別にObject.defineProperty()というメソッドが用意されています。

Object.defineProperty()を使用すると、オブジェクトにプロパティを作成できます。

こんな説明をされると、疑問に感じることがありますよね。

JavaScriptは、わざわざメソッドを使用しなくても、次のコードのように簡単にプロパティを作成できる機能が用意されています。

const obj = {}; // 空のオブジェクトobjを定義
obj.prop = 100;  // objに、propという名前のプロパティを作成し、100をセット

ではどのような場面で、definePropertyは使用されるのでしょうか。

definePropertyを使用する場面例

変数を定義するとき、letまたはconstというキーワードを使用します。

letを使用すると変数の内容を変更できますが、constは変更しようとするとエラーが出て実行が停止します。

let val1 = 1;
val1 = 100;

const val2 = 1;
val2 = 100; // TypeError: invalid assignment to const 'val2'

一方、プロパティを作成するときは、letやconstなどの指定はありません。
しかし実質的にはletと同じ状態で定義されます。

const obj = {}; // 空のオブジェクトobjを定義
obj.prop = 100;  // objに、propという名前のプロパティを作成し、100をセット

obj.prop = 10000;  // 値を変更可能

では変数のconstのように、プロパティの値を変更させたくないときはどうすればいいのでしょうか？

Object.defineProperty()を使用すると、希望した設定で定義することができます。

この例の他にも、Object.defineProperty()は特殊な設定をおこなうことができます。

つまりObject.defineProperty()は、通常とは異なる設定でプロパティを作成したいときに使用します。

Object.defineProperty()は、次のように定義されます。

■引数

オブジェクト: プロパティを追加または変更したいオブジェクト

プロパティ名: 追加または変更したいプロパティの名前

プロパティ記述子: 属性名をキーとしたオブジェクト

try{
    Object.defineProperty(obj, "prop2", {
        value:100,
        get:function (){}
    });
}catch (e) {
    console.log( e.message );
     // property descriptors must not specify a value or be writable when a getter or setter has been specified
}

■戻り値

オブジェクトで指定した値が返ります。

プロパティ記述子設定項目一覧

Object.defineProperty()を使用しないときの属性

Object.defineProperty()を使用せず、通常の方法でプロパティを定義した場合、属性は次の値がセットされます。

value:指定した値
writable:true
enumerable:true
configurable:true

属性の確認はObject.getOwnPropertyDescriptor()を使用します。

const obj = {};
obj.prop = 100;

const od = Object.getOwnPropertyDescriptor( obj , "prop" ); // 引数: オブジェクト,プロパティ名
Object.keys(od).forEach(e=>console.log( `${e}:${od[e]}`) );
  // value:100
  // writable:true
  // enumerable:true
  // configurable:true

データプロパティ

データプロパティとは、プリミティブまたはオブジェクトを値に持つプロパティです。

Object.defineProperty()でvalueまたはwritable属性を指定すると、データプロパティが作成されます。

Object.defineProperty()にvalueまたはwritable属性を指定した場合、getまたはset属性を指定するとエラーになります。

なおデータプロパティの規定値は、writable、enumerable、configurable属性全てがfalseです。

通常の方法で追加したプロパティと異なるので、注意が必要です。

アクセサプロパティ

アクセサプロパティとは、ゲッター関数およびセッター関数を経由して値の取得やセットをおこなうプロパティです。

Object.defineProperty()でgetまたはset属性を指定すると、アクセサプロパティが作成されます。

Object.defineProperty()にgetまたはset属性を指定した場合、valueまたはwritable属性を指定するとエラーになります。

writable属性について

strictモードの挙動

writable属性にfalseを指定すると、値を上書き（代入）することができません。

const obj = {};

Object.defineProperty(obj, "prop2", {
    value: 100,
    writable:false, // 規定値
});
obj.prop2 = 1000; // TypeError: "prop2" is read-only

strictモードの場合、値を上書きするとエラーがスローされます。
しかし非strictモードの場合はエラーにならず、そのままコードが続行されます。

このような場合、プログラムコードの作成者がプロパティを上書き不可に設定してあることを忘れているケースが多いです。
そのため特定が困難なバグの原因になるので、Object.defineProperty()を使用するときはstrictモードの利用をおススメします。

writable属性の制御対象

変数やプロパティは、データの実体ではなくデータに割り振られたラベルのようなものを値として所持しています。

writable属性は、そのラベルを他のものに変更できるかどうかを表すものです。
実体そのものを上書きしているのではないのです。

オブジェクト値とwritable属性

value属性にオブジェクトを指定した場合、writable属性にfalseを指定して上書き不可にしても、そのオブジェクトにプロパティを追加することができます。

const obj = {};

Object.defineProperty(obj, "prop2", {
    value: {},       // 値にオブジェクトを指定
    writable:false, // 規定値
});
obj.prop2.data = 1000; // オブジェクトにプロパティを追加できる

上書き不可のはずなのに、プロパティを追加できるのは不思議に感じます。

しかしwritable属性の制御対象で説明したように、プロパティの上書き属性はオブジェクトの実体に影響を与えていません。
そのため、オブジェクトにプロパティを追加できます。

configurable属性がfalseのときの再定義

configurable属性をfalseでObject.defineProperty()を実行し、同じプロパティに対して再度Object.defineProperty()を実行したとき、次の条件が適用されます。

• configurable属性をtrueに変更できません。

 

• writable属性がtrueなら、valueの変更が可能です。

 

• writable属性をtrueからfalseに変更可能ですが、falseからtrueに変更できません。

 

• writable、get、set属性を変更できません。

 

プロトタイプチェーン/継承プロパティの影響

プロパティに代入を行う際、プロパティのwritable属性がチェックされて、falseなら代入できません。

これはプロトタイプチェーン上のプロパティと同名のプロパティを追加したい場合に大きな影響を与えています。

例えばあるオブジェクトにpropという名前のプロパティを追加したいとします。
ただし、このオブジェクトはプロトタイプチェーン上にpropというプロパティを持っています。

obj:{
  ○○○ ←ここに後からpropを追加したい
  [[Prototype]]:{←プロトタイプチェーン
       prop:20 // writableがfalse 
   }
}
obj.prop = 100;

上記コードの最後 obj.prop = 100; は、まずobjからpropが検索されます。
その結果プロトタイプチェーン上のpropが検出されます。
このとき、このプロパティのwritableがfalseなので、代入が失敗するのです。

通常の方法でプロパティを追加すると、writable属性はtrueで定義されます。そのため、同名のプロパティを追加できます。

const obj = function (){ // コンストラクター関数を定義
    this.prop1 = 10;
};
obj.prototype.prop2 = 20; // 通常の追加：writable属性はtrue

const obj2 = new obj();
  // obj2:{ prop1:10  ,
  //         [[Prototype]]:{prop2:20}←プロトタイプチェーン
  //      }
 
obj2.prop2 = 1000; // prop2を追加
  // obj2:{ prop1:10 , prop2 : 1000 , ← prop2が追加された
  //         [[Prototype]]:{prop2:20}←プロトタイプチェーン
  //      }

Object.defineProperty()でプロパティを追加すると、writable属性はデフォルトでfalseです。

const obj = function (){
    this.prop1 = 10;
};

Object.defineProperty(obj.prototype, "prop2", {
    value:100,
    writable:false, // 規定値
});

const obj2 = new obj();

obj2.prop2 = 1000; // prop2を追加 
  // obj2:{ prop1:10  , ← prop2が追加されていない！
  //         [[Prototype]]:{prop2:20}←プロトタイプチェーン
  //      }

もう一度書きますがwritable属性はデフォルトでfalseです。
Object.defineProperty()を使用する場合、意識的にtrueかfalseを判断する必要があります。

なお非strictモードの場合、上のコードでprop2を追加する操作が失敗してもエラーにならないので、注意が必要です。

プロパティを定数として扱いたい

const obj = {};

Object.defineProperty(obj, "prop2", {
    value:100, // 定数値
    writable:false, // 規定値
    configurable:false, // 規定値
    enumerable:true,
});

プロパティをセッターゲッターとして扱いたい

const obj = {
    data:100,
};

Object.defineProperty(obj, "prop2", {
    get:function (){
        return this.data;
    },
    set:function (data){
        this.data = data;
    },
    configurable:false, // 規定値
    enumerable:true,
});

プロパティを列挙させたくない

const obj = {
};

Object.defineProperty(obj, "prop2", {
    value:100, // 定数値
    writable:true, 
    configurable:false, // 規定値
    enumerable:true,
});

Object.defineProperty()はプロパティを一つ一つ定義していきますが、複数形のObject.defineProperties()を使用すると、複数のプロパティを一括で指定できます。

■引数

オブジェクト: プロパティを追加または変更したいオブジェクト

プロパティ定義: プロパティ名をキー、プロパティ記述子を値として持つオブジェクト

■戻り値

オブジェクトで指定した値が返ります。

const obj = {
    data:100,
};

Object.defineProperties(obj, {
    prop2:{
        value:100,
        writable:true,
    },
    prop3:{
        get:function (){ return this.data; },
        set:function (data){ this.data = data; },
    },
});

Object.freeze()またはObject.seal()を使用すると、オブジェクトの既存プロパティを一括で上書き不可にしたり、オブジェクトのプロパティ追加を禁止したりできます。

詳しくは次の記事を見てください。
■【JavaScript】 オブジェクトのプロパティ追加を禁止する方法

最後までお読みいただきありがとうございます

未経験者が最短期間でプログラマになるには？独学それともスクールどちらが最適なのか

※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
サイト上部の問い合わせよりご連絡ください。
ただしサイトのジャンルによっては、お断りさせていただくことがあります。