JavaScript中get和set访问器的实现

在学习Vue的时候我们知道它的响应式数据原理就是通过Object.defineProperty进行重写定义的，主要是利用get和set属性访问器实现的，接下来看看get和set属性访问器的实现原理

1.ES6的实现方法

js允许在运行时向对象添加状态，并且可以添加行为。为了提高抽象能力，js的属性被设计成了更加复杂的形式，它提提供了两类属性getter/setter，作为其数据属性和访问器属性。也可以简单的理解为，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。

• getter负责查询值，它不带任何参数，setter则负责设置键值，值是以参数的形式传递，在他的函数体中，一切的return都是无效的
• get/set访问器不是对象的属性，而是属性的特性，特性只有内部才用，因此在javaScript中不能直接访问他们，为了表示特性是内部值用两队中括号括起来表示如[[Value]]

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
                
    set name(name) {
        console.log("setter");
        this.name = name;
    }
                
    get name() {
        console.log("getter");
        return this.name;
    }
}

2.Object.defineProperty

Object.defineProperty(obj,prop, descriptor)

参数：

• obj：目标对象，
• prop：需要定义的属性和方法名称，
• descriptor:目标属性所拥有的特性。

可供定义的特性列表：

• value:属性的值
• writable:如果为false，属性的值就不能被重写。
• get: 一旦目标属性被访问就会调回此方法，并将此方法的运算结果返回用户。
• set:一旦目标属性被赋值，就会调回此方法。
• configurable:如果为false，则任何尝试删除目标属性或修改属性以下特性（writable, configurable, enumerable）的行为将被无效化。
• enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。

var lost = {
loc : "Island"
};
Object.defineProperty(lost, "location", {
get : function () {
  return this.loc;
},
set : function (val) {
  this.loc = val;
}
});