ES6_修饰器

修饰器@

只能用于类 和 类的方法

类的修饰器

@testable 
class MyTest {
}

// target 指向修饰的类
function testable(target) {
  target.isTestable = true 
}

MyTest.isTestable  // true

@decorator 
class A {}
//等同于
class A {}
A = decorator(A) || A

修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时

// mixins.js  可以返回一个函数
export function mixins(...list) {
  return function(target) {
    Object.assign( target.prototype, ...list )
  }
}

// main.js
import { mixins } from './mixins.js'
const Foo = {
  foo() {console.log('foo')}
}

@mixins(Foo)  // 当函数调用,传入参数
class MyClass {}

let obj = new MyClass()
obj.foo // 'foo'

方法的修饰

class Person {
  @readonly
  name() { return `${this.first}${this.last}` }
}

readonly 修饰类的 name 方法

// 接收三个参数
// target 修饰的目标对象,即是类的实例
// name 修饰的属性名
// descriptor 该属性的描述对象
function readonly( target, name, descriptor ) {
  // descriptor对象原来的值: {
  // value: ...;enumerable: false,configurable: true, writable: true
  //}
  descriptor.writable = false
  return descriptor
}

readonly( Person.prototype, 'name', descriptor )
//类似与
Object.defineProperty( Person.prototype, 'name', descriptor )

// log 打印日志
class Math {
  @log
  add(a,b) {
    return a + b
  }
}
function log( target, name, descriptor ) {
  var oldValue = descriptor.value
  descriptor.value = function () {
    console.log(`calling "${name}" width`, arguments)
    return oldValue.apply(null, arguments)
  }
  return descriptor
}
const math = new Math()
math.add( 2, 3 )

Mixin 混入

• Object.assgin()

export function mixins(...list) {
  retrun function ( target ) {
    Object.assign( target.prototype, ...list )
  }
}

会改写 类的prototype 对象

• 类的继承 实现一个中间类

let Mixin = ( superClass ) => class extends superClass {
  foo(){
    ...
  }
}

Trait

Babel 转码器的支持