JavaScript：如何将类方法绑定到Proxy对象触发代理拦截

问题核心是类方法调用时this未指向Proxy实例，导致修改属性时绕过了Proxy的set陷阱。虽然你在Reflect.get中传入了Proxy作为receiver，但普通函数的this仍由调用方式决定——如果方法是箭头函数（绑定了原对象的this），或者调用场景特殊，就会出现this指向原对象的情况。

解决方案 #

在Proxy的get陷阱中，对获取到的函数进行绑定，强制让函数调用时的this指向Proxy实例：

class Data {
    i = 0;
    increment() {
        this.i++;
    }
}

const obj = new Data();
const objProxy = new Proxy(obj, {
    get: function(target, prop) {
        const value = Reflect.get(target, prop, objProxy);
        // 绑定函数的this到Proxy实例
        if (typeof value === 'function') {
            return value.bind(objProxy);
        }
        return value;
    },
    set: function(target, prop, value) {
        console.log("setting", prop, "of", target);
        return Reflect.set(target, prop, value, objProxy);
    }
});

objProxy.increment();
console.log(objProxy.i);

原理说明 #

• 当通过objProxy.increment获取方法时，get陷阱会先拿到原方法，再通过bind(objProxy)将方法的this永久绑定到Proxy实例。
• 调用objProxy.increment()时，方法内的this指向Proxy，修改this.i会触发Proxy的set陷阱，输出预期的日志。

注意事项 #

如果你的类中使用箭头函数作为实例方法（比如increment = () => { this.i++; }），箭头函数的this是定义时就绑定到原对象的，这种情况下bind无法修改this指向，需要改用普通函数形式的方法。

内容的提问来源于stack exchange，提问作者Ptolemy2002