ES6知識點整理之----Decorator(修飾器)

類的修飾

修飾器是一個對類進行處理的函數。修飾器函數的第一個參數，就是所要修飾的目標類。
修飾器的行爲：

@decorator
class A {}

// 等同於

class A {}
A = decorator(A) || A;

@testable：修改了類的行爲，爲它加上了靜態屬性isTestableisTestable

@testable
class MyTestableClass {
  // ...
}

//target是MyTestableClass類自己
function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

若是以爲一個參數不夠用，能夠在修飾器外面再封裝一層函數。

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

若是想添加實例屬性，能夠經過目標類的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}` }
}

修飾器函數readonly一共能夠接受三個參數：

• 第一個參數是類的原型對象
• 第二個參數是所要修飾的屬性名
• 第三個參數是該屬性的描述對象

@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} with`, arguments);
    return oldValue.apply(this, arguments);
  };

  return descriptor;
}

const math = new Math();

// passed parameters should get logged now
math.add(2, 4);

修飾器有註釋的做用。

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

//Person類是可測試的，而name方法是隻讀和不可枚舉的。

修飾器只能用於類和類的方法，不能用於函數，由於存在函數提高。

core-decorators.js（略）

是一個第三方模塊，提供了幾個常見的修飾器，經過它能夠更好地理解修飾器。

 

使用修飾器實現自動發佈事件（略）

Mixin模式（略）

Trait（略）

Trait 也是一種修飾器，效果與 Mixin 相似，可是提供更多功能

Babel 轉碼器的支持（略）

目前，Babel 轉碼器已經支持 Decorator。