JS实现监听对象属性变化的函数

  • 使用 Object.defineProperty()
function observe(obj) {
    for (let key in obj) {
        let val = obj[key];
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get: function () {
                return val;
            },
            set: function (newVal) {
                if (newVal !== val) {
                    console.log(`属性 ${key} 从 ${val} 变成了 ${newVal}`);
                    val = newVal;
                }
            }
        });
    }
}

let obj = { count: 0 };
observe(obj);
obj.count = 1;  
  • 使用 Proxy
function observe(obj) {
    return new Proxy(obj, {
        get(target, propKey, receiver) {
            return Reflect.get(target, propKey, receiver);
        },
        set(target, propKey, value, receiver) {
            let oldValue = target[propKey];
            if (value !== oldValue) {
                console.log(`属性 ${propKey} 从  ${oldValue} 变成了 ${value}`);
            }
            return Reflect.set(target, propKey, value, receiver);
        }
    });
}

let obj = { name: 'zs', age: 20, gender: 'male' };
obj = observe(obj);
obj.age = 1;  
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容