es7 javascript 修飾器

通常在JavaScript中爲了讓部分代碼延遲執行，一想起的天然是 setTimeout，好比：

setTimeout(() => {
  // doing
}, 0);

這種代碼或許你不知道寫過多少遍，但，咱們在 setTimeout 中多數狀況下會去調用另外一個方法：

setTimeout(() => {
  this.fn();
}, 0);

你會發現，咱們一直都在重複寫着 setTimeout，再套用一個匿名函數，最後才真正去編寫咱們須要執行的方法。我愈來愈討厭這種寫法，總是寫着一些無關係要多餘的代碼。

使用Angular的同窗對 @Component 不陌生，裏面大量的使用這種ES7纔會有的「修飾器」。

修飾器是一個函數，用於修改類行爲。

那， 應該怎麼編寫一個更乾淨的 setTimeout，好比，我但願這樣來編寫個人timeout：

@timeout(1000)
fn() {
  // doing
}

this.fn();

對應的 timeout 修飾器代碼：

// timeout.ts
export function timeout(milliseconds: number = 0) {
  return function(target, key, descriptor) {
    // value 值至關於上面示例中 `change` 方法。
    var orgMethod = descriptor.value;
    descriptor.value = function(...args) {
      setTimeout(() => {
        orgMethod.apply(this, args);
      }, milliseconds);
    };
    return descriptor;
  }
}

target：實例對象，即 IndexComponent 實例化對象。
key：方法名稱，即 fn。
descriptor：對象描述，同Object.getOwnPropertyDescriptor() 。

怎麼樣，這樣子寫的代碼是否是更酷？

修飾器目前只能在ES7纔會有，但一些在Typescript、Babel等轉碼器已經被支持，特別是Angular2應用中更是給予很是重要的地位。並且應用範圍能夠很是廣，好比類、類方法和屬性。