首頁 > web前端 > 前端問答 > es6裝飾器有幾種

es6裝飾器有幾種

WBOY
發布: 2022-04-25 18:57:48
原創
1670 人瀏覽過

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

es6裝飾器有幾種

本教學操作環境: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中文網其他相關文章!

相關標籤:
es6
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板