Javascript面向对象(二)——setter、getter属性

Javascript面向对象(二)——setter、getter属性

Javascript对象有两种属性，一种是数据属性，我们经常使用比较熟悉；第二种是访问器属性，本质就是获取和设置值的函数，但从代码上好像是正常属性。

Getters 和 setters

访问器属性通过”getter”和”setter”方法表示，在对象中使用get和set文字标识。

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

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

当obj.proName调用是，getter方法读取属性，赋值时setter方法调用。示例，我们有user对象，有name、surname两个属性。
let user = {
name: “John”,
surname: “Smith”
};

现在我们想增加fullName属性，其值为‘John Smith’，我们不想复制粘贴存在的信息，，我们能通过一个访问器实现：
let user = {
name: “John”,
surname: “Smith”,

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

alert(user.fullName); // John Smith

从外面看，访问器属性好像正常属性，这是访问器属性的思想。我们没有作为一个函数调用user.fullName，只是正常读取：getter在后台运行。
现在，fullName仅有一个getter，如果我们打算赋值user.fullName=,则会报错。让我们来增加setter给user.fullName修改错误。

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来访问

属性可以是数据属性或访问器属性，但不能都是。
一旦属性被定义了get prop()或在set prop(),则为访问器属性。所以必须通过getter读取、setter赋值。
有时仅有setter或getter，这时正常的，只是这时不能读取或赋值。

访问器描述符

访问器描述符是不同的。对访问器属性，没有value和writable,代替他们的是get和set函数。
访问器描述可能有：

• get – 无参函数，读取属性时调用,
• set – 无参函数, 给属性赋值时调用,
• enumerable – 与数据属性一致,
• configurable – 与数据属性一致.

示例，使用defineProperty创建fullName访问器时，可以get、set传递描述符。

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

再次提醒，属性只能是访问器或数据属性，不能都是。如果我们视图给描述符同时提供get和value，会报错：

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

  value: 2
});

智能的getter/setter

getter/setter能用作“真实”属性的包装器，实现更多的控制。例如，如果我们想避免user的名称太短，可以存储name在一个特殊属性_name中，然后使用setter过滤赋值。

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...

技术上，外部代码可以直接访问user._name，但有个普遍的共识，使用“_”开头的属性，仅在内部使用，外部对象不要直接访问。

兼容性用途
getter和setter的一个好处是，他们可以控制正常数据属性，并在任何时候调整。举例，我们开始实现user对象使用数据属性name和age：

function User(name, age) {
  this.name = name;
  this.age = age;
}

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

alert( john.age ); // 25

但是很快或后来，需求变了，代替age，我们可能决定去存储birthday，因为更严格、方便：
function User(name, birthday) {
this.name = name;
this.birthday = birthday;
}

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

现在，如何出来原来的代码，他们仍然在使用age属性？
我们可以尝试找到所有age的代码并修改他们，但这太费时，且如果代码是别人写的，很难去做。另外name属性对user对象来说并不多余，在有些地方正是我们需要的，给age增加一个getter，解决这个问题。

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

现在我们多了一个属性，而且原来的代码也正常工作。