如何让构造函数原型方法的附属方法访问实例this？附代码需求

你的核心需求是给构造函数原型上的方法添加一个附属方法myMethod，使得调用实例.方法.myMethod()时，能访问到该实例的this上下文。问题的关键在于：原型上的方法是所有实例共享的，直接给方法添加的myMethod无法自动关联到具体实例的this。

下面提供两种可行的实现方案，你可以根据场景选择：

方案一：使用Getter绑定实例并缓存 #

这种方法通过给原型添加访问器属性（getter），每次访问实例的helloWorld时，返回一个绑定了当前实例的函数，并给该函数附加myMethod。为了避免重复创建函数，我们会把绑定后的函数缓存到实例上：

function As(data) { this.data = data }

// 核心方法逻辑
function helloWorld() { console.log(this.data) }

// 给原型添加getter属性
Object.defineProperty(As.prototype, 'helloWorld', {
  get: function() {
    // 检查实例是否已有缓存的绑定函数
    if (!this._boundHelloWorld) {
      // 绑定当前实例到helloWorld
      const boundFn = helloWorld.bind(this);
      // 定义myMethod：直接调用绑定好的函数
      boundFn.myMethod = function() {
        boundFn();
      };
      // 缓存到实例，避免重复创建
      this._boundHelloWorld = boundFn;
    }
    return this._boundHelloWorld;
  }
});

// 测试
const asI = new As('some data');
asI.helloWorld(); // 输出: 'some data'
asI.helloWorld.myMethod(); // 输出: 'some data'

const asII = new As('another data');
asII.helloWorld.myMethod(); // 输出: 'another data'

原理说明： #

• 当你访问asI.helloWorld时，getter会触发，用bind把当前实例（this指向asI）绑定到helloWorld函数上，确保函数执行时能访问实例的data。
• 给绑定后的函数添加myMethod，它内部直接调用这个已绑定的函数，自然就能拿到实例的上下文。
• 缓存机制保证每个实例只会创建一次绑定函数，避免不必要的性能开销。

方案二：使用Proxy拦截属性访问 #

如果你不想修改原型的属性类型，可以用Proxy来拦截对helloWorld的属性访问和函数调用，动态关联实例上下文：

function As(data) { this.data = data }

// 核心方法逻辑
function helloWorld() { console.log(this.data) }

// 定义Proxy处理器
const helloWorldProxyHandler = {
  // 拦截属性访问（比如访问myMethod）
  get(target, prop, receiver) {
    if (prop === 'myMethod') {
      // receiver就是当前的实例（asI/asII）
      return function() {
        helloWorld.call(receiver);
      };
    }
    // 其他属性访问直接转发给原函数
    return Reflect.get(target, prop, receiver);
  },
  // 拦截函数调用（比如asI.helloWorld()）
  apply(target, thisArg, args) {
    // 确保调用时this指向实例
    return Reflect.apply(target, thisArg, args);
  }
};

// 把原型上的helloWorld替换为Proxy
As.prototype.helloWorld = new Proxy(helloWorld, helloWorldProxyHandler);

// 测试
const asI = new As('some data');
asI.helloWorld(); // 输出: 'some data'
asI.helloWorld.myMethod(); // 输出: 'some data'

const asII = new As('another data');
asII.helloWorld.myMethod(); // 输出: 'another data'

原理说明： #

• Proxy会拦截所有对helloWorld的操作：当调用asI.helloWorld()时，apply拦截器确保helloWorld的this指向实例；当访问asI.helloWorld.myMethod时，get拦截器返回一个函数，该函数用call把实例作为helloWorld的上下文来调用，从而输出实例的data。
• 这种方法不需要修改原函数的结构，也不需要创建多个函数实例，适合需要保持原函数形态的场景。

两种方案都能满足你的需求，方案一更直观易懂，方案二更灵活且性能更优（无需重复创建函数）。你可以根据自己的代码场景选择合适的实现方式。

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