【JavaScript】Objectのgetとsetについて理解をまとめる

こんにちは、ともです。

この記事ではObjectにプロパティを定義する際に、setやgetというプレフィックスを利用することでオブジェクトに対するgetterやsetterを定義することができます。

またObject.defineProperties()を利用方法ついても記述して、理解をまとめておきたいと思います。

Objectのget・setプレフィックスについて理解したい方の役に立てれば幸いです。

set・getの使い方

var obj = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  }
}

console.log(obj.a);//7
console.log(obj.b);//8
obj.c = 50;
console.log(obj.a);//25

objというオブジェクトを定義しました。

ゲッターであるbにアクセスした場合、記述したメソッドが実行されます
セッターであるcに値を代入した場合、記述したメソッドが実行されます。

これを利用することによりオブジェクトのセッターとゲッターを定義することができます。

では作成済みのオブジェクトに対してgetやsetといったプレフィックスを持ったプロパティを追加するにはどうすれば良いのでしょうか。

Object.defineProperties()

既存のオブジェクトに対してプロパティを追加するにはdefinePropertiesというメソッドが利用できます。

Object.defineProperties(obj, props)
obj：プロパティを定義するオブジェクト
props：プロパティの構成情報

definePropertiesを利用して先ほど作成したオブジェクトを定義すると次のようになります。

var obj = { a: 7 };

Object.defineProperties(obj, {
  b: {
    get: function () {
      return this.a + 1
    }
  },
  c: {
    set: function (x) {
      this.a = x / 2
    }
  }
})

このメソッドは第一引数に追加したいオブジェクトをセットし、第二引数では追加したいプロパティについて上記の形式で追加します。