js 数据监听--对象的变化

佚名 6年前 (2019-04-15) 随笔 1363人围观抢沙发百度已收录

class Observer {
    constructor(data) {
        this.data = data;
        this.filterObj(data);
    }
    isObject(obj) {
        if (Object.prototype.toString.call(obj) === "[object Object]") {
            return true;
        }
        return false;

    }
    filterObj(data) {
        if (!this.isObject(data)) return;
        for (const key in data) {
            // 过滤原型链上的属性。
            if (data.hasOwnProperty(key)) {
                const value = data[key];
                if (this.isObject(data[key])) {
                    new Observer(data[key]);
                };
                this.watch(key, value);
            }
        }
    }
    watch(k, v) {
        const that = this;
        Object.defineProperty(this.data, k, {
            enumerable: true,
            configurable: true,
            get: function () {
                console.log(`${k}，被访问。`)
                return v;
            },
            set: function (newV) {
                console.log(`${k}，属性值发生变化。`)
                console.log(`新的值为：${JSON.stringify(newV)}。`)
                if (that.isObject(newV)) {
                    new Observer(newV);
                }
                v = newV;
            },
        })
    }
}
let data = {
    time: '2048',
    user: {
        name: 'naruto',
        equipment: {
            arms: 'kuwu',
            ArmGuard: 'long',
        }
    },
};

const app = new Observer(data);