对于ES6 Proxy 用法的理解以及实例

最新推荐文章于 2025-07-02 12:22:05 发布

原创

最新推荐文章于 2025-07-02 12:22:05 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

学了proxy以后，感觉这是一个很有用的东西。一个最大的功能应该就是能实现对于对象的监听。自己写了一个类，来实现这个功能。下面是代码。

class Watch { // 生成一个watch类
    constructor() {
        this.emit = dispatchEvent.bind(document); 
        this.on = addEventListener.bind(document);
        this.eventUpdated = new Event('updated');
        this.eventRead = new Event('read');
        this.eventChanged = new Event('changed'); 
    } //对事件的方法进行初始化。

    createProxy(obj) { //用此函数来生成一个proxy对象
        let _this = this;
        return new Proxy(obj, {
            get(target, prop) {
                _this.emit(_this.eventRead); //在get属性时触发read事件
                return target[prop];
            },
            set(target, prop, val) {
                let oldVal = target[prop]; 
                target[prop] = val;
                if(oldVal != val) _this.emit(_this.eventChanged); //在set属性时，如果新值和旧值不一样，触发changed事件
                 _this.emit(_this.eventUpdated); //在set属性时，触发updated事件
            }
        });