Property getters and setters

有 2 種類型的屬性，一般的屬性為資料屬性，另一種為訪問屬性，基本用來獲取、設定值，看起來跟一般屬性一樣。

Getters and setters

// syntax
let obj = {
  get propName() {
    // getter, the code executed on getting obj.propName
  },

  set propName(value) {
    // setter, the code executed on setting obj.propName = value
  }
};

// 用已有的資料添加 fullName 屬性
let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

alert(user.fullName); // John Smith
// 不用函式的方式呼叫 get，使用一般屬性呼叫得到值

// 改變 fullName 的值，要用 set
let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// set fullName is executed with the given value.
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

// 一個屬性只能有一個類型，如果屬性用 get、set 定義，就不是資料屬性。
// If there’s a getter – we can read object.prop, otherwise we can’t.
// If there’s a setter – we can set object.prop=..., otherwise we can’t.
// 我們不能刪除訪問屬性

Accessor descriptors

訪問屬性沒有 value、writable。

• get – a function without arguments, that works when a property is read,

• set – a function with one argument, that is called when the property is set,

• enumerable – same as for data properties,

• configurable – same as for data properties.

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },

  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

alert(user.fullName); // John Smith

for(let key in user) alert(key); // name, surname

// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
  get() {
    return 1
  },

  value: 2
});

Smarter getters/setters

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short, need at least 4 characters");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
alert(user.name); // Pete

user.name = ""; // Name is too short...

Using for compatibility

// 原本儲存了 name、age 屬性
function User(name, age) {
  this.name = name;
  this.age = age;
}

let john = new User("John", 25);

alert( john.age ); // 25

// 現在改儲存 name、birthday 屬性
function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let john = new User("John", new Date(1992, 6, 1));

// 舊的 age 屬性可以做改寫，符合我們的使用
function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // age is calculated from the current date and birthday
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

let john = new User("John", new Date(1992, 6, 1));

alert( john.birthday ); // birthday is available
alert( john.age );      // ...as well as the age