@name
@seal
class Person {
  sayHello() {
    console.log(`hello ,my name is ${this.name}`)
  }
}

function name(constructor) {
  Object.defineProperty(constructor.prototype,'name',{
    value:'一凨'
  })
}
new Person().sayHello()

//若修改一个属性

function seal(constructor) {
  let descriptor = Object.getOwnPropertyDescriptor(constructor.prototype, 'sayHello')
  Object.defineProperty(constructor.prototype, 'sayHello', {
    ...descriptor,
    writable: false
  })
}

new Person().sayHello = 1;// Cannot assign to read only property 'sayHello' of object '#<Person>'

上面说到mixin，那么我就来模拟一个mixin吧

class A {
  run() {
    console.log('我会跑步!')
  }
}

class B {
  jump() {
    console.log('我会跳!')
  }
}

@mixin(A, B)
class C {}

function mixin(...args) {
  return function (constructor) {
    for (const arg of args) {
      for (let key of Object.getOwnPropertyNames(arg.prototype)) {
        if (key === 'constructor') continue;
        Object.defineProperty(constructor.prototype, key, Object.getOwnPropertyDescriptor(arg.prototype, key));
      }
    }
  }
}

let c = new C();
c.jump();
c.run();
// 我会跳!
// 我会跑步!

截止目前我們貌似写了非常多的代码了，对。。。这篇，为了彻底搞投Decorator，这。。。只是开始。。。

在class成员中的使用

这类的装饰器的写法应该就是我们最为熟知了，会接受三个参数:

• 如果装饰器挂载在静态成员上，则会返回构造函数，如果挂载在实例成员上，则返回类的原型
• 装饰器挂载的成员名称
• Object.getOwnPropertyDescriptor的返回值

首先，我们明确下静态成员和实例成员的区别

class Model{
  //实例成员
  method1(){}
  method2 = ()=>{}
  
  // 靜態成員
  static method3(){}
  static method4 = ()=>{}
}

method1 和method2 是实例成员，但是method1存在于prototype上，method2只有实例化对象以后才有。

method3和method4是静态成员，两者的区别在于是否可枚举描述符的设置，我们通过babel转码可以看到：

上述代码比较乱，简单的可以理解为：

function Model () {
  // 成员仅在实例化时赋值
  this.method2 = function () {}
}

// 成员被定义在原型链上
Object.defineProperty(Model.prototype, 'method1', {
  value: function () {}, 
  writable: true, 
  enumerable: false,  // 设置不可被枚举
  configurable: true
})

// 成员被定义在构造函数上，且是默认的可被枚举
Model.method4 = function () {}

// 成员被定义在构造函数上
Object.defineProperty(Model, 'method3', {
  value: function () {}, 
  writable: true, 
  enumerable: false,  // 设置不可被枚举
  configurable: true
})

可以看出，只有method2是在实例化时才赋值的，一个不存在的属性是不会有descriptor的，所以这就是为什么在针对Property Decorator不传递第三个参数的原因，至于为什么静态成员也没有传递descriptor，目前没有找到合理的解释，但是如果明确的要使用，是可以手动获取的。

就像上述的示例，我们针对四个成员都添加了装饰器以后，method1和method2第一个参数就是Model.prototype，而method3和method4的第一个参数就是Model。

class Model {
  // 实例成员
  @instance
  method1 () {}
  @instance
  method2 = () => {}

  // 静态成员
  @static
  static method3 () {}
  @static
  static method4 = () => {}
}

function instance(target) {
  console.log(target.constructor === Model)
}

function static(target) {
  console.log(target === Model)
}

函数、访问器、属性 三者装饰器的使用

• 函数装饰器的返回值会默认作为属性的value描述符的存在，如果返回为undefined则忽略