如何監聽一個對象的變化

監聽一個對象的變化是實現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方法