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