Angular背景下理解HostListener：自定义Listen装饰器this指向问题求助

你遇到的核心问题是装饰器的执行时机：你的Listen装饰器是在类定义阶段（而非实例创建阶段）执行的，此时target指向的是Demo的原型对象，而不是具体的实例。所以你用oldValue.bind(target)绑定的是原型，导致事件触发时this指向原型，而非你创建的Demo实例——这就是为什么this.counter的行为不符合预期（实际上会在原型上创建counter属性，所有实例共享同一个值）。

正确的实现思路 #

我们需要把事件监听的绑定逻辑推迟到每个实例创建完成后，这样才能确保this指向当前实例。具体来说，可以通过重写类的构造函数，在实例初始化后为其绑定事件监听。

修改后的代码 #

class Demo {
  counter = 0;

  @Listen("mousemove")
  onMouseMove(e?) {
    console.log(this);
    this.counter++;
  }
}

export function Listen(eventName) {
  // 方法装饰器：target是类的原型，key是被装饰的方法名
  return (target, methodName, descriptor) => {
    // 保存原类的构造函数
    const OriginalClass = target.constructor;

    // 重写构造函数，注入实例级的事件绑定逻辑
    target.constructor = function(...args) {
      // 创建原类的实例
      const instance = new OriginalClass(...args);
      
      // 将方法绑定到当前实例，确保this指向正确
      const eventHandler = instance[methodName].bind(instance);
      
      // 为实例添加事件监听
      window.addEventListener(eventName, eventHandler);

      // 可选：添加销毁方法，用于移除监听防止内存泄漏
      instance._eventHandlers = instance._eventHandlers || [];
      instance._eventHandlers.push(() => {
        window.removeEventListener(eventName, eventHandler);
      });

      instance.destroy = function() {
        this._eventHandlers.forEach(handler => handler());
        this._eventHandlers = [];
      };

      return instance;
    };

    // 保持原型链的一致性，避免破坏类的继承关系
    target.constructor.prototype = OriginalClass.prototype;

    // 返回原方法描述符，不修改方法本身的逻辑
    return descriptor;
  };
}

// 测试示例
const demo1 = new Demo();
const demo2 = new Demo();

// 当不再需要实例时，调用销毁方法清理监听
// demo1.destroy();
// demo2.destroy();

关键细节解释 #

1. 构造函数重写：通过修改target.constructor（即原类的构造函数），我们可以在每个实例创建时插入自定义逻辑。
2. 实例级绑定：instance[methodName].bind(instance)确保事件触发时，this严格指向当前创建的实例，每个实例的counter会独立维护。
3. 内存泄漏防护：添加destroy方法可以手动移除事件监听，避免实例被销毁后监听仍然存在导致的内存泄漏。

这样修改后，你的装饰器就和Angular的HostListener一样，能正确绑定到实例的this了。

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