JS装饰器的一次最佳实践

缘起

近期产品提了个类似支付宝收能量活动的需求，其中有一项需求是获得能量球需要完成一些任务，比如：分享活动页面可以获得a能量，完成场景开启可以获得b能量，操作遥控器可以获得c能量等等……

这些任务都是产品已经存在的功能，如果更改每一项产生能量球任务的功能，则可能需要不断的 repeat 自己，增大代码量的同时，后期如果变更需求或者产生bug也需要重复的体力劳动。这些都是我不期望看到的。那么有没有一种优雅的解决方案呢？

其实能量球任务和产品已存在的功能是没有必然关系的，只是因为这个活动才有了那么一丝丝关联。所以没有必要耦合在一起，恰好近期在看设计模式，装饰器模式给了我一些灵感：

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。
这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。

何不写一个能量球任务的装饰器，装饰一下需要完成任务的功能方法，这样既减少了代码量、又不会repeat自己，是一种比较优雅的解决方案。

性空

既然使用装饰器模式，那么必须先写出一个能量球任务装饰器来。

V1版本如下所示：

// 收能量任务装饰器
function getPowerTask (taskCode) {
  return function (target, property, descriptor) {
    const rawFunc = descriptor.value;
    descriptor.value = async (...args) => {
      console.log(target, `property=${property}`, descriptor)
      await powerModel.finishTask(taskCode);
      await rawFunc.apply(target, args);
    }
    return descriptor;
  }
}

一个活动页面分享成功后调用能量球任务装饰器的代码如下所示：

export default class ShareTask extends Component {
  ……
  shareView() {
    const shareMod = this.getShareMod();
    const shareOpt = this.getShareOpts();
    shareMod.share(shareOpt).then(
        res => this.shareAfter(),
        err => console.log(err)
     )
  }

  @getPowerTask('share')
  async shareAfter() {
      console.log('shareAfter');
      await this.props.shareAfter();
  }
  ……

  render() {
    ……
  }
}

结果是喜忧参半，喜的是可以成功的触发收能量任务，忧的是shareAfter方法内获取this.props 的结果是 undefined。

为啥是这样的结果呢，后来打断点调试发现 target 是 Component 原型，并不是 Component 实例。后来翻阅资料发现其实 Decorator 只是ES7的语法糖，类方法上的装饰器底层还是基于 Object.defineProperty 来实现的，上面的装饰器使用babel翻译成ES5其实就是如下执行的：

getPowerTask(ShareTask.prototype, 'shareAfter', descriptor);
// 类似于
Object.defineProperty(ShareTask.prototype, 'shareAfter', descriptor);

把 shareTask.proptype 的 shareAfter 方法重新定义成了我们的方法。既然装饰器只是一层封装，那么当方法具体执行的时候，是不是就是在实例里面了，考虑到这样，我对装饰器进行了以下改装：

1、箭头方法的this指向是在方法定义的地方，这里this需要指向执行的地方，所以改成普通方法
2、rawFunc.apply 的上下文改成this，即弃用原型对象，改成执行上下文对象

V2收能量装饰器

function getPowerTask (taskCode) {
  return function (target, property, descriptor) {
    const rawFunc = descriptor.value;
    descriptor.value = async function(...args) => {
      console.log(target, `property=${property}`, descriptor)
      await powerModel.finishTask(taskCode);
      await rawFunc.apply(this, args);
    }
    return descriptor;
  }
}

后来试了一下V2 版本，果然成功的获取到了 props 属性。

总结

此次成功的实践了装饰器模式，虽说软件工程没有银弹，这次开发也算是一次寻找“铅弹”的过程吧，下面总结一些装饰器填坑的经验：

this指向问题

Object.defineProperty方法是对类原型的方法进行重新定义，执行的时候还是在类实例下执行。如果想封装类的原有方法同时想同时使用类的实例，descriptor.value 必须定义一个普通函数，不能使用箭头函数。实例执行的时候this的指向就是当前实例类

普通函数不能使用装饰器

因为javascript在生成上下文对象的时候存在函数声明提升，所以对普通函数装饰失效。

不要手里有锤子，全世界去找钉子

他山之石

阮一峰装饰器实例文档
某大神