阅读 11

从一个小例子学习Typescript中的装饰器Decorator

在ECMAScript中,很早就存在关于装饰器Decorator的提案,但一直没有作为正式的特性发布到Javascript中。Typescript实现了其中的一种版本,供我们使用和学习。不过没关系,区别仅仅在于实现的细节,只要我们理解了装饰器的目的和作用,即使有了新版本的规范,我们也能从容面对。


装饰器是用来更改Class的行为,通过装饰器,我们可以改变某个类的属性、方法、构造函数的参数等等。而装饰器的本质就是一个函数,我们在使用时,会把类及其属性传给该函数,然后在函数内部更改传入的类或类的方法,即可实现我们的目的。


以常见的函数节流功能为例,可以编写一个节流装饰器工厂函数:

function throttle(timeout: number) {
  return function (target: any, propertyName: string, descriptor: any) {
    const originalValue = descriptor.value;
    let enable = true;
    return {
      ...descriptor,
      value: function(...args: any[]) {
        if (!enable) { return; }
        enable = false;
        originalValue(args);
        setTimeout(() => {
          enable = true;
        }, timeout);
      }
    };
  };
}复制代码

在上述工厂函数中,我们接收一个参数,来确定节流的时间间隔。然后我们在工厂函数中返回一个函数,该函数就是实际的装饰器函数。

装饰器函数接收三个参数:

  • 我们作用的方法所在类的构造函数或者原型(这取决于方法是静态方法还是实例方法)
  • 方法名
  • 该方法属性的描述符

然后我们在装饰器函数中返回了一个描述符对象,重写了我们将要更改的方法的描述符。我们把描述符的value替换成了我们新写的具有节流功能的函数。

然后就可以使用这个修饰符了。

class B {
  constructor() {}
  @throttle(1100)
  alert(string: string) {
    console.log(new Date().getUTCSeconds());
    console.log(string);
  }
}
let ab = new B();
setInterval(() => {
  ab.alert('报警');
}, 400);复制代码

我们会发现,即使我们设置了每隔400ms打印一次信息,实际上是每隔1100ms才会打印一次。

上述例子可以从这里运行:https://www.typescriptlang.org/play