装饰器是ES2016 stage-2的一个草案，但是在babel的支持下，已被广泛使用。关于ES规范可参考Github：tc39/proposals
类的修饰
@testable
class MyTestableClass {
// ...
}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
注意，修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。也就是说，修饰器本质就是编译时执行的函数。
前面的例子是为类添加一个静态属性，如果想添加实例属性，可以通过目标类的prototype对象操作。
function testable(target) {
target.prototype.isTestable = true;
}
@testable
class MyTestableClass {}
let obj = new MyTestableClass();
obj.isTestable // true
方法的修饰
多了两个参数(类的没有)
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}
function readonly(target, name, descriptor){
// descriptor对象原来的值如下
// {
// value: specifiedFunction,
// enumerable: false,
// configurable: true,
// writable: true
// };
descriptor.writable = false;
return descriptor;
}
又例如一个日志的修饰器
class Math {
@log
add(a, b) {
return a + b;
}
}
function log(target, name, descriptor) {
var oldValue = descriptor.value;
descriptor.value = function(...list) {
console.log(list);
console.log(`Calling ${name} with`, ...list);
return oldValue.call(this, ...list);
};
return descriptor;
}
const math = new Math();
// passed parameters should get logged now
let result = math.add(2, 4);
console.log(result)
叠加使用
如果同一个方法有多个修饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。
function dec(id){
console.log('evaluated', id);
return (target, property, descriptor) => console.log('executed', id);
}
class Example {
@dec(1)
@dec(2)
method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1
❗️注意如果有多个装饰器修改了getter和setter，那么叠加使用会存在问题，因为后面的会覆盖前面的getter和setter
为什么修饰器不能用于函数
修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。
常用的第三方装饰器库
core-decorators.js是一个第三方模块，提供了几个常见的修饰器，通过它可以更好地理解修饰器。
提供了 @autobind @readonly @override @deprecate 等方法。
Trait 也是一种修饰器，效果与 Mixin 类似，但是提供更多功能，比如防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。
例如traits-decorator。这个模块提供的traits修饰器，不仅可以接受对象，还可以接受 ES6 类作为参数。
