初识 JavaScript 的 decorator 修饰器

一、环境配置

许多面向对象的语言都有修饰器（Decorator）函数，目前在 JavaScript 中已经有关于 decorator 的提案，但是还没有浏览器可以兼容这一语法。我们可以使用代码转换工具 babel 将我们的代码转换成ES5风格的代码。

首先我们需要安装 babel 命令行工具 babel-cli（全局安装，或者局部安装并运行npx） 以及 babel 插件 transform-decorators-legacy

npm install babel-cli -g
npm install babel-plugin-transform-decorators-legacy -D

然后通过以下命令将我们的代码转换并输出到 test.js 这个文件，这样我们就可以直接运行转换后的代码

babel --plugins transform-decorators-legacy decorator.js --out-file test.js
node test.js

如果你需要通过编程的形式使用 babel，或者是在 webpack 等自动化工具中使用 babel，则需要安装 babel-core，
并在 .babelrc 文件中进行配置。关于 babel 的配置，详见官方文档说明：babel官方文档

二、类的修饰

通过以下代码，我们简单的实现了一个添加/修改类的属性的修饰器

function changeMood(target) {
  target.isHappy = true
}

@changeMood
class Person {}

console.log(Person.isHappy) // true

原本的类 Person 上面没有静态属性，通过函数 changeMood 的修饰之后，为 Person 添加了静态属性 isHappy。函数 changeMood 的第一个参数 target 就是所修饰的目标类。

如果你需要动态的去为一个类添加静态属性，我们可以采用高阶函数的形式，在外层再封装一个函数，用以接收动态传入的参数。

function changeMood(isHappy) {
  return function(target) {
    target.isHappy = isHappy
  }
}

@changeMood(true)
class Boy {}
console.log(Boy.isHappy) // true

@changeMood(false)
class Girl {}
console.log(Girl.isHappy) // false

上述代码再原来的函数 changeMood 外面再封装了一层函数，就可以接收参数作为我们要给类的静态属性所赋的值。

以上，我们都是在为类添加或修改静态属性，如果我们我们要为类的实例添加属性呢，可以通过目标类的 prototype 对象操作。

function addAge(age) {
  return function(target) {
    target.prototype.age = age
  }
}

@addAge(20)
class Girl {}

let Lucy = new Girl()
console.log(Lucy.age) // 20

可以看到，我们通过修饰器函数为目标类 Girl 的 prototype 添加了 age 属性。之后我们创建了一个 Girl 的实例 Lucy，则实例上面已经拥有了 age 属性。

三、 类的方法修饰

修饰器不仅可以修饰一个类，还可以修饰类里面的属性和方法。

function readonly(target, name, descriptor){
  descriptor.writable = false
}

class Person {
  @readonly
  skills() {console.log('I can play tennis.')}
}

let John = new Person()
John.skills = function() {console.log('Skills will be changed.')}
// TypeError: Cannot assign to read only property 'skills' of object '#<Person>'

在上面的代码中，我们定义了一个 readonly 修饰器，目的是使类的一个属性变成不可修改的。
修饰器函数 readonly 一共可以接受三个参数。
修饰器的第一个参数是类的原型（尽管我们的本意是修饰类的实例，但是此时类的实例还没有生成，所以我们只能去修饰类的原型，此后实例生成，会从它的类的原型上继承属性）。
第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。
我们可以发现，修饰器的三个参数和 Object.defineProperty 的三个参数非常相似。更多关于第三个参数 descriptor 的信息，请查阅 MDN 上关于 Object.defineProperty 的说明。

通过以上代码，我们将 Person 的实例方法 skills 设置成了不可修改，所以我们之后在尝试给实例 John 的 skills 方法重新赋值时出现报错。

四、应用

在我们开发 React 项目的过程中，常常需要进行一些组件之间的通信，这时我们可能会使用 redux 状态管理器。
通常情况下，我们需要通过 redux 的 connect 方法将 state 和 action 与视图组件进行关联，那么我们一般会这么写：

class oneComponent extends react.Component {}
export defalut connect(mapStateToProps, mapDispatchToProps)(oneComponent)

在使用了修饰器函数之后，我们可以这样写

@connect(mapStateToProps, mapDispatchToProps)
class oneComponent extends react.Component {}

这样的写法，显然更加的简洁明了，让人一眼就看明白了，我们将 redux 与视图组件进行了关联。

除此之外，我们还可以通过修饰器，进行一个日志打印的应用。
在展示这个应用之前，我们先来了解一下，为什么要使用修饰器来完成日志打印这样一个功能。
首先我们了解一个概念：面向切面编程（AOP），引用百度百科的上说明：

AOP主要实现的目的是针对业务处理过程中的切面进行提取，它所面对的是处理过程中的某个步骤或阶段，以获得逻辑过程中各部分之间低耦合性的隔离效果。

举一个简单的例子：对于一个信用卡应用程序来说，存款、取款、帐单管理是它的主关注点，日志和持久化将成为横切整个对象结构的横切关注点。如果我们按照传统方式去实现日志功能，则需要在类的每一个业务逻辑的实现中添加日志记录的实现，这就使得我们的业务逻辑与日志记录实现了紧耦合。为了将业务逻辑与非业务逻辑的部分分离开来，可以使用修饰器来实现。

function log(target, name, descriptor) {
  let method = descriptor.value;
  descriptor.value = function (...args){
    console.log(`"${name}" has been invoked with "${args}"`)
    return method(...args)
  }
}

class Calculator {
  @log
  power(base, exponent) {
    return base ** exponent
  }
}

let cal = new Calculator()
cal.power(3,4) // "power" has been invoked with "3,4"

通过修饰器函数 log，我们在 power 方法中添加了打印日志的功能，我们通过给 descriptor 的 value 属性添加了一句console.log，然后将原来的方法执行结果返回出来，实现了原方法得以执行，并打印出了执行的日志。当我们需要给其他方法添加打印日志功能时，也同样可以使用该修饰器来实现。

关于修饰器的内容，还有很多很多，比如一些第三方的修饰器库，如 core-decorators.js，都是别人已经封装好的修饰器，我们可以安装引入，然后直接进行使用。

更多关于JavaScript decorator 的内容，可以查阅 阮一峰的ES6入门 。