JavaScript的代理（Proxy）

最新推荐文章于 2025-10-07 23:57:52 发布

原创最新推荐文章于 2025-10-07 23:57:52 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #Proxy

javascript 专栏收录该内容

28 篇文章

订阅专栏

本文探讨了JavaScript中代理的原理，如何通过代理实现对象的响应式行为，并介绍了可撤销代理的概念、创建及撤销过程。重点讲述了代理与目标对象的交互以及Proxy.prototype的特性。

代理是目标对象的抽象。

目前理解为，代理就是给目标对象绑定一个指针。或者是JavaScript中的代理的原型绑定到了目标对象的原型上，但是代理的原型是undefined。
当对象改变或者代理改变，两者都会互相改变。一种响应式的行为。
可撤销代理bug: 代理变量名必须为proxy，撤销方法变量名必须为revoke

const target = {
    id: 'target'
};

const handler = {};

定义一个普通的proxy代理，为了不与可撤销代理的指定变量名冲突，普通代理尽量不要用proxy命名

const proxyObj = new Proxy(target, handler);

id属性会访问同一个值

console.log('target: ', target.id, '\n', 'proxyObj: ', proxyObj.id);

给目标属性赋值会反映在两个对象上
因为两个对象访问的是同一个值。准确的来说，应该是访问同一个内存地址

target.id = 'target modify';
console.log('target: ', target.id, '\n', 'proxyObj: ', proxyObj.id);

相反的，给代理属性赋值也会反映在两个对象上
因为这个赋值会转移到目标对象

proxyObj.id = 'proxy modify';
console.log('target: ', target.id, '\n', 'proxyObj: ', proxyObj.id);

hasOwnProperty() 方法在两个地方都会应用到目标对象

console.log('target hasOwnProperty: ', target.hasOwnProperty('id'));
console.log('proxyObj hasOwnProperty: ', proxyObj.hasOwnProperty('id'));

Proxy.prototype是undefined
因此不能使用instanceof操作符

console.log( target instanceof Proxy); // TypeError: Function has non-object prototype 'undefined' in instanceof check
console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype 'undefined' in instanceof check

严格相等可以用来区分代理和目标

console.log('target equals proxy: ', target === proxyObj); // false

可撤销代理bug: 代理变量名必须为proxy，撤销方法变量名必须为revoke
可撤销代理创建

const targetObj = {
    name: 'dabing'
}

const handlerObj = {
    get() {
        return 'intercepted';
    }
}

定义其可撤销代理时，对应的两个变量名，必须为proxy与 revoke

const { proxy, revoke } = Proxy.revocable(targetObj, handlerObj); 

console.log('targetObj : ', targetObj.name);
console.log('proxyObj : ', proxy.name);

revoke(); //撤销代理, 此操作是不可逆的。

console.log('proxyObj : ', proxy.name); // proxy引用不到目标对象，所以会报TypeError

代理另一个代理

const target2 = {
    name: 'target object'
};

const firstProxy = new Proxy(target2, {
    get() {
        console.log('first Proxy');
        return Reflect.get(...arguments);
    }
});

const secondProxy = new Proxy(firstProxy, {
    get() {
        console.log('second Proxy');
        return Reflect.get(...arguments);
    }
});

console.log("************************************************************");
// console.log(target2.name);
// console.log(firstProxy.name);
console.log(secondProxy.name);