es6裝飾器有哪些

這篇“es6裝飾器有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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 來輸出日志。

以上就是關于“es6裝飾器有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。