JS 装饰器解析

随着 ES6 和 TypeScript 中类的引入，在某些场景需要在不改变原有类和类属性的基础上扩展些功能，这也是装饰器出现的原因。

装饰器简介

作为一种可以动态增删功能模块的模式(比如 redux 的中间件机制)，装饰器同样具有很强的动态灵活性，只需在类或类属性之前加上 @方法名 就完成了相应的类或类方法功能的变化。

不过装饰器模式仍处于第 2 阶段提案中，使用它之前需要使用 babel 模块 transform-decorators-legacy 编译成 ES5 或 ES6。

在 TypeScript 的 中，定义了 4 种不同装饰器的接口，其中装饰类以及装饰类方法的接口定义如下所示：

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void; declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

下面对这两种情况进行解析。

作用于类的装饰器

当装饰的对象是类时，我们操作的就是这个类本身。

@log class MyClass { } function log(target) { // 这个 target 在这里就是 MyClass 这个类 target.prototype.logger = () => `${target.name} 被调用` } const test = new MyClass() test.logger() // MyClass 被调用