摘要：修飾器修飾器是提出的一個提案，用來修改類的行為。目前需要才可以使用。其執(zhí)行格式如下是修飾器名，即函數(shù)名相當于修飾器函數(shù)接受個參數(shù)，依次是目標函數(shù)屬性名可忽略該屬性的描述對象可忽略。

修飾器是 ES7 提出的一個提案，用來修改類的行為。目前需要 babel 才可以使用。它最大的特點是：可以在編譯期運行代碼！其本質(zhì)也就是在編譯器執(zhí)行的函數(shù)。其執(zhí)行格式如下：

@decorator    //decorator 是修飾器名，即函數(shù)名
class A{}
//相當于
class A{}
A = decorator(A) || A;

修飾器函數(shù)接受3個參數(shù)，依次是目標函數(shù)、屬性名(可忽略)、該屬性的描述對象(可忽略)。

function test(target){
  target.isTestable = true;               //利用修飾器給類添加靜態(tài)屬性
  target.prototype.isTestable = true;     //利用修飾器給類添加動態(tài)屬性
}

@test
class A{}

console.log(A.isTestable);       //true
console.log(new A().isTestable);   //true

例如之前的 mixin 可以用修飾器實現(xiàn)一個簡單的版本：

function mixins(...list){
  return function(target){
    Object.assign(target.prototype, ...list);
  }
}
var Foo = {
  foo(){console.log("foo");}
};
@mixins(Foo)
class Cla{}
let obj = new Cla();
obj.foo();     //"foo"

修飾器不僅僅可以修飾類，還可以修飾類的屬性和方法：

function readonly(target, name, descriptor){
  descriptor.writable = false;
  return descriptor;
}

class Person{
  constructor(name, age, tel){
    this.name = name;
    this.id = id;
  }
  @readonly
  id(){return this.id};
}

當然也可以同時調(diào)用2個修飾器：

function readonly(target, name, descriptor){
  descriptor.writable = false;
  return descriptor;
}
function nonenumerable(target, name, descriptor){
  descriptor.enumerable = false;
  return descriptor;
}

class Person{
  constructor(name, age, tel){
    this.name = name;
    this.id = id;
  }
  @readonly
  @nonenumerable
  id(){return this.id};
}

使用修飾器應(yīng)該注意：雖然類本質(zhì)是個函數(shù)，但修飾器不能用于函數(shù)，因為函數(shù)具有聲明提升。

這是個三方模塊，使用import {function Namelist} from "core-decroators";引入。它提供了幾個常見的修飾器：

@autobind

是對象中的 this 始終綁定原始對象：

class Person{
  @autobind
  whoami(){
    return this;
  }
}
let person = new Person();
let getPerson = person.getPerson;

getPerson() === person;    //true

@readonly

使得屬性方法只讀

class Person{
  @readonly
  id = gen();     //gen 是一個計數(shù)器
}
var p = new Person()
p.id = 123;   //Cannot assign to read only property "id" of [object Object]

@override

檢查子類方法是否正確的覆蓋了父類的同名方法，如果不正確會報錯

class Person{
  work(){console.log("I am working");}
}
class Coder extends Person{
  @override
  work(){console.log("I am coding");}   //如果不正確會在這里報錯
}

@deprecate(也作: @deprecated)

在控制臺顯示一條 warning，表示該方法不久后將被廢除，接受一個可選的參數(shù)作為警告內(nèi)容, 接受第二個參數(shù)(對象)表示更多信息

class Person{
  @deprecate
  facepalm(){}

  @deprecate("We stopped facepalming")
  facepalmHard(){}

  @deprecate("We stopped facepalming", {url:"http://balabala.com"})
  facepalmHarder(){}
}

@suppressWarnings

抑制 deprecate 修飾器導(dǎo)致調(diào)用 console.warn(), 但異步代碼發(fā)出的除外。

class Person{
  @deprecate
  facepalm(){}

  @supressWarnings
  facepalmWithoutWarning(){
    this.facepalm();
  }
}
let p = new Person();
p.facepalm();    //控制臺顯示警告
p.facepalmWithoutWarning();    //沒有警告

此外還有一些庫提供一些其他功能，比如 Postal.js(Github)中的 @publish, 可以在函數(shù)調(diào)用時發(fā)布一個事件：

import publish from "../to/decorators/publish";

class FooComponent{
  @publish("foo.some.message", "component")
  someMethod(){}

  @publish("foo.some.other", "")
  anotherMethod(){}
}

再比如 Trait(Github), 和 mixin 功能類似，提供了更強大的功能：防止同名沖突，排除混入某些方法，為混入方法起別名等

import {traits} from "traits-decorator"

class TFoo{
  foo(){console.log("foo1")}
}
class TBar{
  bar(){console.log("bar")}
  foo(){console.log("foo2")}
}

@traits(TFoo, TBar)       //會報錯，因為這兩個類中有同名方法
class MyClass{}

let obj = new MyClass();
//如果沒有第八行的同名方法，輸出如下
obj.foo();   //"foo1"
obj.bar();   //"bar"

但是我們可以修改上面第11行排除這個 foo，讓它可以被覆蓋：

@traits(TFoo, TBar::excludes("foo"))
class MyClass{}

也可重命名同名方法：

@traits(TFoo, TBar::alias(foo:"aliasFoo"))
class MyClass{}

當然綁定運算符可以鏈式調(diào)用：

//假設(shè)還有個同名的 baz 方法
@traits(TFoo, TBar::excludes("foo")::alias(baz:"aliasBaz"))
class MyClass{}

//另一種寫法
@traits(TFoo, TBar::as({excludes: ["foo"], alias: {baz:"aliasBaz"}}))
class MyClass{}