JavaScript中怎么用Proxy拦截对对象作用域和原型链属性的读取与修改-js教程-PHP中文网

proxy 不能拦截作用域，只拦截对象及其属性的访问行为；通过 get/set 拦截器可感知自有或继承属性的读写，但无法直接修改原型属性，需借助 receiver 保持 this 正确性并配合 reflect 操作。

javascript中怎么用proxy拦截对对象作用域和原型链属性的读取与修改

Proxy 不能直接拦截“作用域”（如变量作用域、闭包作用域），它只作用于**对象本身及其属性访问行为**，包括对自身属性、原型链上属性的读取（get）和设置（set）。但通过合理设计 get 和 set 拦截器，可以感知并控制对原型链属性的访问——关键在于是否触发了原型上的属性查找。

拦截自身属性 + 原型链属性的读取（get）

get(target, prop, receiver) 是核心。当访问一个属性时，JS 引擎会先查 target 自身，再沿 [[Prototype]] 向上查找，而 Proxy 的 get 拦截发生在**每次属性访问入口**，无论属性是否存在、在哪一层。

你可以利用 Reflect.get() 委托默认行为，并在前后加逻辑：

用 target.hasOwnProperty(prop) 判断是否为自身属性
用 prop in target 或 Object.prototype.hasOwnProperty.call(Object.getPrototypeOf(target), prop) 辅助判断来源（但注意：不推荐手动遍历原型链，易出错）
更可靠的做法是：先用 Reflect.get(target, prop, receiver) 获取值，再结合 Object.getOwnPropertyDescriptor(target, prop) 看是否自有描述符

示例：记录所有读取，区分自有/继承

const obj = { a: 1 };
const proto = { b: 2 };
Object.setPrototypeOf(obj, proto);

const proxy = new Proxy(obj, {
  get(target, prop, receiver) {
    const desc = Object.getOwnPropertyDescriptor(target, prop);
    const isOwn = !!desc;
    const value = Reflect.get(target, prop, receiver);
    
    console.log(`读取 ${prop}: ${isOwn ? '自有' : '继承'}, 值=${value}`);
    return value;
  }
});

proxy.a; // 读取 a: 自有, 值=1
proxy.b; // 读取 b: 继承, 值=2

拦截原型链属性的修改（set）需特别注意

set(target, prop, value, receiver) 默认只对**目标对象自身可写属性**生效。如果 prop 在原型上（且不可写/不可配置），直接赋值不会触发 set 拦截器——因为 JS 引擎根本不会尝试修改原型属性，而是会在 target 上新建自有属性（即“屏蔽”原型属性）。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

所以：Proxy 的 set 拦截只能捕获“向 target 写入”的动作，无法强制修改原型上的属性。若想干预原型属性修改，必须确保该属性是可写的，或把修改逻辑放在原型对象自身的 Proxy 中。

若希望禁止覆盖原型属性，可在 set 中检查 prop in target === false && prop in Object.getPrototypeOf(target) === true，然后拒绝写入
若想把写操作转发到原型，需手动调用 Reflect.set(Object.getPrototypeOf(target), prop, value, receiver)（前提是原型可写）
注意 receiver：它通常是 proxy 本身，用于保持 this 正确性，尤其在访问 getter 时

真正影响原型链行为的关键：receiver 和 this 绑定

receiver 参数在 get/set 中决定属性访问时的 this 值。例如，当 proxy 被用作方法调用的 this，getter 内部的 this 就是 receiver（即 proxy），而非原始 target。

这意味着：如果你在原型上定义了 getter，它内部读取 this.xxx，实际走的是 proxy 的 get 拦截，从而形成递归可控链。

const proto = {
  get fullName() {
    return this.firstName + ' ' + this.lastName; // this 是 proxy，触发 proxy.get
  }
};
const target = { firstName: 'John' };
Object.setPrototypeOf(target, proto);
const proxy = new Proxy(target, {
  get(target, prop, receiver) {
    console.log('proxy get:', prop);
    return Reflect.get(target, prop, receiver);
  }
});
proxy.fullName; // 输出两次 'proxy get:'（firstName、lastName）