(三十一)ECMA5-setter&getter

一、setter和getter语法

ES5 允许您使用类似于获取或设置属性的语法来定义对象方法。

var person = {
    firstName: "Bill",
    lastName: "Gates",
    get fullName(){
        return this.firstName + " " + this.lastName;
    }
}
//使用getter显示来自对象的数据
console.log(person.fullName);

为语言属性创建一个 setter 和一个 getter

var person = {
    firstName: "Bill",
    lastName: "Gates",
    language: "No",
    get lang(){
        return this.language;
    },
    set lang(value){
        //设置使用setter确保语言的大写更新
        this.language = value.toUpperCase();
    }
}
//使用setter设置对象属性
person.lang = "en";
console.log(person.lang);

二、JavaScript函数还是getter？

通过以下两个例子来看一下

//例子1
var person = {
     firstName: "Bill",
     lastName: "Gates",
     fullName: function () {
         return this.firstName + " " + this.lastName;
     }
 };
 // 使用方法来显示来自对象的数据：
 console.log(person.fullName());
//例子2
 var person = {
     firstName: "Bill",
     lastName: "Gates",
     get fullName() {
         return this.firstName + " " + this.lastName;
     }
 };
 // 使用 getter 来显示来自对象的数据：
 console.log(person.fullName);

例子 1 以函数形式访问 fullName：person.fullName()。 例子 2 以属性形式访问 fullName：person.fullName。 第二个例子提供了更简洁的语法。

三、数据质量

使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。

var person = {
    firstName: "Bill",
    lastName: "Gates",
    language: "en",
    get lang() {
        return this.language.toUpperCase();
    }
};
// 使用 getter 来显示来自对象的数据：
console.log(person.lang);
var person = {
    firstName: "Bill",
    lastName: "Gates",
    language: "",
    set lang(lang) {
        this.language = lang.toUpperCase();
    }
};
// 使用 getter 来设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
console.log(person.language);

四、为什么使用setter和getter？

• 它提供了更简洁的语法
• 它允许属性和方法的语法相同
• 它可以确保更好的数据质量
• 有利于后台工作

  五、一个计数器实例

  ```javascript var obj = { counter: 0, get reset() {

    this.counter = 0;

  }, get increment() {

    this.counter++;

  }, get decrement() {

    this.counter--;

  }, set add(value) {

    this.counter += value;

  }, set subtract(value) {

    this.counter -= value;

  } };

// 操作计数器： obj.reset; console.log(obj); obj.add = 5; console.log(obj); obj.subtract = 1; console.log(obj); obj.increment; console.log(obj); obj.decrement; console.log(obj);

<a name="AQ5Jx"></a>
### 六、Object.defineProperty() 方法也可以用于添加getter和setter
```javascript
// 定义对象
 var obj = { counter: 0 };
 // 定义 setters
 Object.defineProperty(obj, "reset", {
     get: function () { this.counter = 0; }
 });
 Object.defineProperty(obj, "increment", {
     get: function () { this.counter++; }
 });
 Object.defineProperty(obj, "decrement", {
     get: function () { this.counter--; }
 });
 Object.defineProperty(obj, "add", {
     set: function (value) { this.counter += value; }
 });
 Object.defineProperty(obj, "subtract", {
     set: function (value) { this.counter -= value; }
 });
 // 操作计数器：
 obj.reset;
 console.log(obj);
 obj.add = 5;
 console.log(obj);
 obj.subtract = 1;
 console.log(obj);
 obj.increment;
 console.log(obj);
 obj.decrement;
 console.log(obj);