JS 中怎么用 Proxy 代理对象拦截原型属性的访问-js教程-PHP中文网

Proxy 无法拦截原型链属性访问，因其 trap 仅触发于目标对象自身属性操作；需通过拷贝属性、getter 委托或 defineProperty 挂载等方式间接实现拦截。

js 中怎么用 proxy 代理对象拦截原型属性的访问

Proxy 无法直接拦截对原型链上属性的访问，这是 JavaScript 的核心机制决定的：当访问一个对象上不存在的属性时，引擎会自动沿着 [[Prototype]] 向上查找，而 Proxy 只能拦截目标对象自身的操作（如 get、set），不会介入原型链查找过程。

为什么 Proxy 不拦截原型属性访问

Proxy 的 trap（如 get）只在「明确访问目标对象自身」时触发。例如：

const proto = { x: 1 };
const obj = Object.create(proto);
const proxy = new Proxy(obj, {
  get(target, key) {
    console.log('get triggered:', key);
    return Reflect.get(...arguments);
  }
});

console.log(proxy.x); // 输出 1，但不会打印 log —— 因为 x 在 proto 上，不在 obj 自身
console.log(proxy.y); // 同样不触发 get（y 不存在于自身或原型，最终返回 undefined）

此时 proxy.x 查找路径是：proxy → 无 x → 查 proxy.[[Prototype]]（即 proto）→ 找到 x。Proxy 的 get trap **根本没被调用**。

想拦截原型访问？得让属性“看起来”在自身

有几种实用思路，本质都是把原型行为“收编”到代理对象自身：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

用 Object.assign 或展开符把原型属性浅拷贝到目标对象（适合静态、已知的原型属性）：

const proto = { x: 1, y: 2 };
const base = Object.create(proto);
const target = { ...base }; // 把 proto 的可枚举属性复制过来
const proxy = new Proxy(target, {
  get(target, key) {
    console.log('intercepted access to:', key);
    return key in target ? target[key] : undefined;
  }
});
console.log(proxy.x); // ✅ 触发 log，输出 1

在 get trap 中主动委托给原型（模拟拦截）：虽然不是真正“拦截查找过程”，但能统一控制所有读取逻辑：

const proto = { x: 1, method() { return 'from proto'; } };
const obj = Object.create(proto);

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    console.log('get called for:', key);

    // 先查自身
    if (key in target) {
      return Reflect.get(target, key, receiver);
    }

    // 再手动查原型（可加日志、权限检查、转换等）
    const desc = Object.getOwnPropertyDescriptor(proto, key);
    if (desc && desc.get) {
      return desc.get.call(receiver); // 处理 accessor
    }
    return proto[key];
  }
});

console.log(proxy.x); // 输出 "get called for: x" + 1

用 defineProperty 在目标对象上定义 getter，指向原型（适合需要响应式或动态控制的场景）：

const proto = { x: 1 };
const obj = Object.create(proto);

// 把原型属性“挂载”为自身的 getter
Object.defineProperty(obj, 'x', {
  get() {
    console.log('x accessed via own getter');
    return proto.x;
  }
});

const proxy = new Proxy(obj, {
  get(target, key) {
    console.log('proxy get:', key);
    return Reflect.get(target, key);
  }
});
console.log(proxy.x); // ✅ 两次 log，然后输出 1