es6裝飾器有哪些

這篇“es6裝飾器有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“es6裝飾器有哪些”文章吧。

es6裝飾器有兩種。裝飾器只能用于類和類的方法，因此可以分為：1、類裝飾器，用來裝飾整個(gè)類，語法為“@ 函數(shù)名”；2、類方法裝飾器，用來裝飾類的方法，語法為“@ 函數(shù)名 方法名”。

本教程操作環(huán)境：windows10系統(tǒng)、ECMAScript 6.0版、Dell G3電腦。

es6裝飾器有幾種

es6裝飾器有兩種。

裝飾器（Decorator）是一種與類（class）相關(guān)的語法，用來注釋或修改類相關(guān)的方法和屬性。許多面向?qū)ο蟮恼Z言都有這個(gè)功能。一般和類class相關(guān)，普通的方法不要去使用。

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

裝飾器只能用于類和類的方法，不能用于函數(shù)，因?yàn)榇嬖诤瘮?shù)提升。

1、類裝飾器

類裝飾器用來裝飾整個(gè)類

示例如下：

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

如上面代碼中，裝飾器 @decorateClass 修改了 Example 整個(gè)類的行為，為 Example 類添加了靜態(tài)屬性 isTestClass。裝飾器就是一個(gè)函數(shù)，decorateClass 函數(shù)中的參數(shù) target 就是 Example 類本身，也相當(dāng)于是類的構(gòu)造函數(shù) 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 分別裝飾了實(shí)例方法 instanceMethod 和 靜態(tài)方法 staticMethod。@log 裝飾器的作用是在執(zhí)行原始的操作之前，執(zhí)行 console.log 來輸出日志。

以上就是關(guān)于“es6裝飾器有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。