为什么将函数传递给元数据时“this”未定义以及如何修复它？

Question

我想在 Typescript 装饰器和 reflect-metadata 的帮助下创建一个抽象。但是当我调用传入元数据的函数时，this 是未定义的：

import "reflect-metadata";

const METHODS = "__methods__";
const Method = (obj: object) => {
  return function MethodDecorator(
    target: object,
    methodName: string | symbol,
    descriptor: PropertyDescriptor
  ) {
    const metadata = Reflect.getMetadata(METHODS, obj);

    Reflect.defineMetadata(
      METHODS,
      { ...metadata, [methodName]: descriptor.value },
      obj
    );
  };
};

const someObject: object = new Object();
class Main {
  private num = 42;

  constructor(other: Other) {
    other.init(someObject);
  }

  @Method(someObject)
  myMethod() {
    console.log("hello");
    console.log(this.num); // this is undefined (how can I fix it?)
  }
}

class Other {
  private methods: Record<string, Function> = {};

  init(obj: object) {
    this.methods = Reflect.getMetadata(METHODS, obj);
  }

  trigger(methodName: string) {
    this.methods[methodName]();
  }
}

const other = new Other();
new Main(other);
other.trigger("myMethod");

上面代码sn-p的输出是

hello
undefined

为什么this 未定义，我该如何解决？

---

您可以通过克隆 this 示例 repo 并运行来自己尝试

yarn install
yarn start

Answer 1

如果您通过将this 的值传递给other.init 来保存this 的值，如下所示，然后将该值绑定到每个方法，它将起作用。不幸的是，not seem possible 可以将this 直接传递给装饰器，尽管这样会更干净。

const someObject: object = new Object();
class Main {
  private num = 42;

  constructor(other: Other) {
    other.init(someObject, this);
  }

  @Method(someObject)
  myMethod() {
    console.log("hello");
    console.log(this.num); // 42
  }
}

class Other {
  private methods: Record<string, Function> = {};

  init(obj: object, thisArg: object) {
    this.methods = Reflect.getMetadata(METHODS, obj);
    Object.keys(this.methods).forEach((method) => {
      this.methods[method] = this.methods[method].bind(thisArg);
    })
  }

  trigger(methodName: string) {
    this.methods[methodName]();
  }
}

const other = new Other();
new Main(other);
other.trigger("myMethod");

Answer 2

那是因为您在这一行返回的是 function 而不是箭头函数：

return function MethodDecorator(

这会创建一个新的上下文（函数范围），这会导致this 指向全局对象。 this 已定义：this.num 未定义，因为 window.num 不存在。

因此，如果您将该函数作为箭头函数返回，则词法 this 将被保留，您将可以访问 this.num：

const Method = (obj: object) => {
  return (
    target: object,
    methodName: string | symbol,
    descriptor: PropertyDescriptor
  ) => {
    const metadata = Reflect.getMetadata(METHODS, obj);

    Reflect.defineMetadata(
      METHODS,
      { ...metadata, [methodName]: descriptor.value },
      obj
    );
  };
};