对象的getter与setter

在ES5以前，读/写对象的属性时，产生的结果就是返回了对象属性的值/设置了对象属性的值。
在ES5之后，对于用get/set方法定义的属性来说，对它进行读/写属性时，其结果却是可以由开发者来自定义的。即给了开发者自己去定义“读/写对象的属性”这个两种操作的具体行为的权利，使得灵活性大大提高。

例如：

var obj={
     _name:"veb",
     get name(){
             console.log("你获取了name的值")；
             return this._name;
     },
     set name(a){
             console.log("你设置了name的值为"+x)；
             return this._name=x;
     },
}
console.log(obj.name)//你获取了name的值
obj.name="len"//你设置了name的值为len

聪明的你马上就能想到vue的双向绑定，这是为师对你的信任！

对于get和set不过是一个es5提供的语法糖而已，为什么这么说？

一个对象，如果在你修改或获取属性值之前想做一些事情该怎么办呢？

var o = (function(){
          var age = 0;
          return {
                  get_age:function(){
                        console.log("你想知道我的年龄？已经给你return出去了")
                        return age;
                  },
                  set_age:function(v){
                       console.log("你要设置我的年龄为"+v)
                       age=v;
                 }
             }
         })();
     o.get_age();//你想知道我的年龄？已经给你return出去了
     o.set_age(12);//你要设置我的年龄为12
     console.log(o.get_age());//你想知道我的年龄？已经给你return出去了      12

现在明白了吧？vue的数据检测就是使用的es5 的get&set不同于angular脏查询机制,那么如何批量检测呢？

Object.defineProperty（obj，key，valueObj）

其中obj代表要在哪个对象上设置属性，key为属性名，valueObj为值对象配置，相关可以参考es5数组及对象处理方法

基础用法

var obj={};
Object.defineProperty(obj,'age', {
            value: 18,
            writable: true,
            enumerable: true,
            configurable: true
 });
console.log(obj.age)//18；

//或者同时定义多个属性：
Object.defineProperties(obj, {
            'age': {
                value: 24,
                writable: true,
                enumerable: true,
                configurable: true
            },
            'sex': {
                value: '男',
                writable: false,
                enumerable: false,
                configurable: false
            }
});

定义get&set

var obj={
      _name:"veb"
};
Object.defineProperty(this,"name", {
           get: function() {
             console.log("你获取了name的值");
             return this._name;
           },
           set: function(y) {
             console.log("你设置了的值")
             return this_=y;
           },
});

注意：key和要监测的属性名不能为同一个，不然同时使用get&set会出现死循环！

批量监测：

function fun(obj){
        var obj2={};
        for(var i in obj){
            this["_"+i]=obj[i];
        }
        console.log(this);
        var self=this;
        for(var x in this){
            (function(x){
                Object.defineProperty(self,x.replace("_",""), {
                    get: function() {
                        console.log("你获取了"+x+"的值")
                        return self[x]
                    },
                    enumerable: true,
                    configurable: true,
                    set: function(y) {
                        console.log("你设置了"+x+"的值")
                        return self[x]=y;
                    },
                });
            })(x)
        }
    }
    var person=new fun({
        name:"veb",
        age:"20"
    })
    console.log(person.name)//你获取了name的值       veb
    person.age=50//你设置了age的值

加油！欢迎光临个人站清风笔记