1. 程式人生 > >Javascript學習---屬性getters和setters

Javascript學習---屬性getters和setters

物件的屬性有兩種型別,第一種是資料屬性,第二種是訪問器屬性。資料屬性我們已經很熟悉了,現在我們來講解第二種屬性-訪問器屬性,也就是set和get屬性


getters和setters

訪問器屬性由getter和setter方法來表示,例如:

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

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


新增get方法例子:

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

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

alert(user.fullName); // John Smith

新增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
上述例子中,set方法裡面採用解構賦值的方式來設定name和surname屬性值,所以我們可以直接使用“=”來賦值


訪問器描述符

訪問器屬性的描述符和資料屬性的描述符是不同的,訪問器屬性的描述符是沒有value和writable的,它的具體描述符為:get、set、enumerable和configurable


我們可以使用defineProperty()來新增屬性並設定訪問器屬性的描述符,例如:

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);

需要注意的是,物件的屬性只能是資料屬性或者訪問器屬性,不能兩者都是,如果在訪問器屬性中新增資料屬性的描述符,例如value或writable,則會報錯:

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

  value: 2
});