如何使用JavaScript Proxy捕获构造函数并保持原型链

我完全懂你遇到的这个麻烦——用Proxy捕获构造函数确实能帮我们拦截实例的创建过程，但默认的Proxy配置很容易打乱原本正常的继承链。先回顾下你给出的正常继承场景：

const B = function() {}
// undefined
B.name
// 'B'
class C extends B {}
// [Function: C]
B.prototype == C.prototype.__proto__
// true
var instance = new C()
// undefined
C.prototype == instance.__proto__
// true

当你直接用Proxy包裹B时，比如写const proxyB = new Proxy(B, {});再让子类继承它，会发现C.prototype.__proto__不再等于B.prototype，实例的原型链也会出问题。这是因为Proxy本身是一个独立对象，它的默认prototype是Function.prototype，而非原构造函数B的prototype；而且子类继承时会读取被代理对象的prototype，默认Proxy不会把这个访问转发给原构造函数。

修复方案：配置Proxy陷阱维护继承链 #

我们需要在Proxy的陷阱里手动处理几个关键属性和操作，确保继承行为和原构造函数完全一致：

const B = function() {};

const proxyB = new Proxy(B, {
  // 拦截属性访问，确保prototype、name等关键属性返回原构造函数的值
  get(target, prop) {
    if (prop === 'prototype') {
      return target.prototype;
    }
    if (prop === 'name') {
      return target.name;
    }
    // 其他属性默认转发到原构造函数
    return Reflect.get(target, prop);
  },
  
  // 拦截new操作，确保实例原型链正确，同时保留new.target指向
  construct(target, args, newTarget) {
    // 用Reflect.construct保证和原生new操作行为一致
    const instance = Reflect.construct(target, args, newTarget);
    
    // 这里可以添加你需要的实例操作逻辑，比如修改实例属性
    instance.proxyCaptured = true;
    
    return instance;
  }
});

// 测试继承
class C extends proxyB {}

// 验证继承链
console.log(B.prototype === C.prototype.__proto__); // true
console.log(C.prototype === new C().__proto__); // true

// 验证实例被Proxy捕获处理
console.log(new C().proxyCaptured); // true
console.log(new proxyB().proxyCaptured); // true

关键细节说明： #

• get陷阱处理prototype：子类继承时会读取父构造函数的prototype来设置自身原型的__proto__，必须让Proxy返回原构造函数的prototype，而非Proxy自身的prototype。
• get陷阱处理name：保持构造函数的name属性和原函数一致，避免调试或依赖name属性的逻辑出错。
• construct陷阱用Reflect.construct：第三个参数newTarget至关重要——当用new C()创建实例时，newTarget是C而非proxyB，这样创建的实例会正确关联到C的prototype，保证继承链正常。同时你可以在这个陷阱里自由操作刚创建的实例，实现捕获逻辑。

这样配置后，Proxy既能帮你拦截构造过程操作实例，又不会破坏原本的继承关系，完全符合你的需求。

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