装饰器简介

在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因。

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

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

在 TypeScript 的 lib.es5.d.ts 中,定义了 4 种不同装饰器的接口:

  1. declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;
  2. declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
  3. declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
  4. declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;

下面对装饰类以及装饰类方法进行解析。

作用于类的装饰器

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

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

由于装饰器是表达式,我们也可以在装饰器后面再添加提个参数:

  1. @log('hello')
  2. class MyClass { }
  3. function log(text) {
  4. return function(target) {
  5. target.prototype.logger = () => `${text},${target.name} 被调用`
  6. }
  7. }
  8. const test = new MyClass()
  9. test.logger() // hello,MyClass 被调用

在使用 redux 中,我们最常使用 react-redux 的写法如下:

  1. @connect(mapStateToProps, mapDispatchToProps)
  2. export default class MyComponent extends React.Component {}

经过上述分析,我们知道了上述写法等价于下面这种写法:

  1. class MyComponent extends React.Component {}
  2. export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

作用于类方法的装饰器

与装饰类不同,对类方法的装饰本质是操作其描述符。可以把此时的装饰器理解成是 Object.defineProperty(obj, prop, descriptor) 的语法糖,看如下代码:

  1. class C {
  2. @readonly(false)
  3. method() { console.log('cat') }
  4. }
  5. function readonly(value) {
  6. return function (target, key, descriptor) { // 此处 target 为 C.prototype; key 为 method;
  7. // 原 descriptor 为:{ value: f, enumarable: false, writable: true, configurable: true }
  8. descriptor.writable = value
  9. return descriptor
  10. }
  11. }
  12. const c = new C()
  13. c.method = () => console.log('dog')
  14. c.method() // cat

可以看到装饰器函数接收的三个参数与 Object.defineProperty 是完全一样的,具体实现可以看 babel 转化后的代码,主要实现如下所示:

  1. var C = (function() {
  2. class C {
  3. method() { console.log('cat') }
  4. }
  5. var temp
  6. temp = readonly(false)(C.prototype, 'method',
  7. temp = Object.getOwnPropertyDescriptor(C.prototype, 'method')) || temp // 通过 Object.getOwnPropertyDescriptor 获取到描述符传入到装饰器函数中
  8. if (temp) Object.defineProperty(C.prototype, 'method', temp)
  9. return C
  10. })()

再将再来看看如果有多个装饰器作用于同一个方法上呢?

  1. class C {
  2. @readonly(false)
  3. @log
  4. method() { }
  5. }

经 babel 转化后的代码如下:

  1. desc = [readonly(false), log]
  2. .slice()
  3. .reverse()
  4. .reduce(function(desc, decorator) {
  5. return decorator(target, property, desc) || desc;
  6. }, desc);

可以清晰地看出,经过 reverse 倒序后,装饰器方法会至里向外执行。

相关链接

javascript-decorators
Javascript 中的装饰器
JS 装饰器(Decorator)场景实战
修饰器
Babel