如何监听一个对象的变化

监听一个对象的变化是实现watcher与双向数据绑定的基础，我们来一起看看如何监听一个对象的变化。

在这里我们可以用到ES5中Object的defineProperty属性来做到对一个对象进行监听，那么先简单认识一下defineProperty的用法。

    let obj = {};
    let nameVal = 'friday';
    
    Object.defineProperty(obj, 'name', {
        configurable : true,//是否是可配置的----是否可以更改enumerable,writable等
        enumerable : true，//是否可被for in枚举
        get : function() {
            return nameVal.toUpperCase();
        },
        set : function(newVal) {
            nameVal = newVal;
        }
    });

这里需要注意下name并不用定义在obj自身当中，只要保证get与set函数拿到外层定义的nameVal值，即相当于obj本身定义了name属性，如果想监控自身本身就拥有的name属性可以如下写法。

    let obj = {name : 'friday'};
    let val = obj.name;
    
    Object.defineProperty(obj, 'name', {
        configurable : true,
        enumerable : true,
        get : function() {
            return val.toUpperCase();
            //注意这里不能写成return obj.name.toUpperCase();会造成死循环无限执行getter造成泄漏
        },
        set : function(newVal) {
            if(val === newVal) return;
            val = newVal;
        }
    });

 

基本的监听对象变化就如上面的代码呈现的一样，但是还有一个问题如果对象的属性依然是对象，这种情况该如何处理比如下面的这种结构。

    let obj = {
        user : {
            name : 'friday',
            gender : 'male'
        },
        info : {
            age : 2    
        }
    };

答案是我们可以使用递归算法来监听每一个对象

    var Observer = function(data) {
        //此处的this.data = data;为了方便后面原型上拿取对象
        this.data = data;
        this.walk(data);
    };

    Observer.prototype.walk = function(obj) {

        let val;
        for(let key in obj) {
            //因为for in循环会枚举原型链上的key所以用hasOwnProperty来过滤
            if(obj.hasOwnProperty(key)) {
                val = obj[key];
                if(typeof val === 'object') {
                    new Observer(val);
                }
                //注意此处使用一个闭包，因为如果直接使用Object.defineProperty最终返回的val值永远是遍历拿到的最后一个val，当然改写的方式不止一种，我们也可以不用闭包直接利用let的特性将let写进for in循环中，或者将这个匿名函数闭包直接定义在原型上，在此处我们推荐后一种方式
                (function(key, val){
                    Object.defineProperty(obj, key, {
                        configurable : true,
                        enumerable : true,
                        get : function() {
                            console.log('你访问了' + key);
                            return val;
                        },
                        set : function(newVal) {
                            console.log('你更改了' + key);
                            if(val === newVal) return;
                            val = newVal;
                        }
                    });
                })(key, val);
            }
        }

    };

将闭包函数定义在原型中

        Observer.prototype.walk = function (obj) {

        let val;
        for(let key in obj) {
            if(obj.hasOwnProperty(key)) {
                val = obj[key];
                if(typeof val === 'object') {
                    new Observer(val);
                }
                this.convert(key, val);
            }
        }

    };

    Observer.prototype.convert = function (key, val) {

        Object.defineProperty(this.data, key, {
            configurable : true,
            enumerable : true,
            get : function () {
                console.log('你访问了' + key);
                return val;
            },
            set : function (newVal) {
                console.log('你更改了' + key + '=' + newVal);
                if(val === newVal) return;
                val = newVal;
            }
        })

    };

    new Observer(obj);

上面的代码遗留了两个问题 1. 不能监听数组的变化 2. 如果重新set的属性是对象话，新对象不具有setter与getter方法