javascript - typescript 中的类装饰器

Question

当我们希望替换构造函数时，我试图了解类装饰器在 Typescript 中的工作方式。我看过这个演示:

const log = <T>(originalConstructor: new(...args: any[]) => T) => {
    function newConstructor(... args) {
        console.log("Arguments: ", args.join(", "));
        new originalConstructor(args);
    }
    newConstructor.prototype = originalConstructor.prototype;
    return newConstructor;
}

@log
class Pet {
    constructor(name: string, age: number) {}
}

new Pet("Azor", 12);
//Arguments: Azor, 12

一切都明白了，除了这一行:

newConstructor.prototype = originalConstructor.prototype;

我们为什么要这样做？

Answer 1

类如下:

class Pet {
    constructor(name: string, age: number) {}
    dosomething() {
        console.log("Something...");
    }
}

在针对 ES5 时被编译成函数:

var Pet = (function () {
    function Pet(name, age) {
    }
    Pet.prototype.dosomething = function () {
        console.log("Something...");
    };
    return Pet;
}());

当我们使用函数定义类时，您会看到。这些方法被添加到函数的原型(prototype)中。

这意味着如果您要创建一个新的构造函数(新函数)，您需要从旧对象复制所有方法(原型(prototype)):

function logClass(target: any) {

  // save a reference to the original constructor
  const original = target;

  // a utility function to generate instances of a class
  function construct(constructor: any, args: any[]) {
    const c: any = function () {
      return constructor.apply(this, args);
    };
    c.prototype = constructor.prototype;
    return new c();
  }

  // the new constructor behaviour
  const newConstructor: any = function (...args: any[]) {
    console.log("New: " + original.name);
    return construct(original, args);
  };

  // copy prototype so intanceof operator still works
  newConstructor.prototype = original.prototype;

  // return new constructor (will override original)
  return newConstructor;
}

您可以在 "Decorators & metadata reflection in TypeScript: From Novice to Expert (Part I)" 了解更多信息

更新

请引用https://github.com/remojansen/LearningTypeScript/tree/master/chapters/chapter_08获取更新的版本。