前言

今天在学习中对于装饰器感觉比较陌生，于是百度查了一下Decorator的用法，特意在此记录一下。

须知

由于目前并不直接支持Decorator，因此需要先安装babel-plugin-transform-decorators-legacy

yarn add babel-plugin-transform-decorators-legacy babel-core babel-polyfill --dev

同时修改.babelrc文件

{
    "plugins": ["transform-decorators-legacy"]
}

• 简介

装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法。许多面向对象的语言都有这项功能，目前有一个提案将其引入了 ECMAScript。

装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。

• 类的装饰

装饰器可以用来修饰整个类

@test
class Boy{
}
function test(target){
    target.age=10
}
console.log(Boy.age)//10

上面是给class加静态属性，同样可以给class加实例属性，可以通过目标类的prototype对象操作。

@test
class Boy{
}
function test(target){
    target.prototype.age=10
}
const luck=new Boy();
console.log(luck.age)//10

如果参数不够用，可以在装饰器外层再封装一层函数

@test(11)
class Boy{
}
function test(age){
   return function(target){
       target.prototype.age=age;
   }
}
const luck=new Boy();
console.log(luck.age)//11

• 装饰方法

class Boy{
    @log
    add(a,b){
        return a+b
    }
}
function log(target,name,descriptor){
   let oldValue=descriptor.value;
  descriptor.value=function(){
      console.log(`calling ${name} with`,arguments);
      return oldValue.apply(this,arguments)
  }
  return descriptor
}
 const math =new Boy();
console.log(math.add(2,3))
//calling add with [Arguments] { '0': 2, '1': 3 }
//5

装饰器第一个参数是类的原型对象，上例是Boy.prototype，装饰器的本意是要“装饰”类的实例，但是这个时候实例还没生成，所以只能去装饰原型（这不同于类的装饰，那种情况时target参数指的是类本身）；第二个参数是所要装饰的属性名，第三个参数是该属性的描述对象。

• Mixin

在装饰器的基础上，可以实现Mixin模式。将一个对象混入另外一个对象。

const Foo={
    foo(){
        console.log('foo')
    }
}
function mixins(list){
    return function (target) {
        Object.assign(target.prototype,list);
      };
  }
  @mixins(Foo)
  class MyClass {}
  let obj = new MyClass();
 obj.foo()