[JavaScript入門] definePropertyを使ってGetterおよびSetterを作成する


今回は、JavaScriptでGetterとSetterを表現していきます。

Getterとは、「フィールドの値を取り出すだけのメソッド」であり、Setterというのは「フィールドに値を代入するためのメソッド」となります。

Object.definePropertyについて

Object.definePropertyは下記のように、指定したオブジェクトに対してプロパティを定義することができます

Object.defineProperty(Object,PropertyName,PropertyDiscrypta)

第1引数には、オブジェクトを指定します。
第2引数には、指定した名前のプロパティを定義します。
第3引数はプロパティの属性を指定します。

この第3引数に指定するプロパティ属性情報に設定することができる項目は下記の通りです。

種別属性初期値説明
プロパティValueundefinedプロパティに値を設定する
writablefalseValue属性に対して上書きできるかどうかを設定する
アクセサgetundefinedGetter関数を設定する
setundefinedSetter関数を設定する
共通enumerablefalsefor-in文やObject.keys()で列挙されるかどうか
configurablefalse属性変更可能かどうか

今回getterやsetterをdefineProperty関数を利用して表現しますが、getやsetを指定した場合はvalueやwritable属性を指定できません。

getter/setter 使用例

let student = {
  firstName: "Kunisura"
}

// Getter
Object.defineProperty(student, "getName", {
  get : function () {
    return this.firstName;
  }
});

// Setter
Object.defineProperty(student, "setName", {
  set : function (value) {
    this.firstName = value;
  }
});

// default
console.log(student.firstName); // Kunisura

// use getter
console.log(student.getName); // Kunisura

// set name
student.setName = "Kunichan";

console.log(student.getName); // Kunichan

さいごに

使用例を記載しましたが、わざわざgetter/setterを作成せず、関数等で代用すれば良いなどと考えられますが、getter/setterの利用メリットは「上書き」ができない点かと思います、

データプロパティを厳密に管理するケースは多いかと思いますので是非ご参考までに。