es6裝飾器有幾種

es6裝飾器有兩種。裝飾器只能用於類和類的方法，因此可以分為：1、類裝飾器，用來裝飾整個類，語法為「@ 函數名」；2、類方法裝飾器，用來裝飾類的方法，語法為“@ 函數名方法名”。

本教學操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6裝飾器有幾種

es6裝飾器有兩種。

裝飾器（Decorator）是一種與類別（class）相關的語法，用來註解或修改類別相關的方法和屬性。許多物件導向的語言都有這個功能。一般和類別class相關，普通的方法不要去使用。

裝飾器是一種函數，寫成@ 函數名稱。它可以放在類別和類別方法的定義前面。裝飾器就是執行函數，給類別或類別下面的屬性方法加一些控制條件。

裝飾器只能用於類別和類別的方法，不能用於函數，因為存在函數提升。

1、類別裝飾器

類別裝飾器用來裝飾整個類別

範例如下：

@decorateClass
class Example {
    //...
}
 
function decorateClass(target) {
    target.isTestClass = true
}

如上面程式碼中，裝飾器@decorateClass 修改了Example 整個類別的行為，為Example 類別新增了靜態屬性isTestClass。裝飾器就是一個函數，decorateClass 函數中的參數target 就是Example 類別本身，也相當於是類別的建構子Example.prototype.constructor.

2、類別方法裝飾器

類別方法裝飾器用來裝飾類別的方法

範例如下：

class Example {
    @log
    instanceMethod() { }
 
    @log
    static staticMethod() { }
}
 
function log(target, methodName, descriptor) {
  const oldValue = descriptor.value;
 
  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };
 
  return descriptor;
}

如上方程式碼中，裝飾器@log 分別裝飾了實例方法instanceMethod 和靜態方法staticMethod。 @log 裝飾器的作用是在執行原始的操作之前，執行 console.log 來輸出日誌。

【相關推薦：javascript影片教學、web前端】

以上是es6裝飾器有幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！