ES7 Decorators（修飾器）

張漢慶發布于2019-08-20 18:11 / 2766人閱讀

ES6 Decorators（修飾器）

修飾器（Decorator）是一個函數，用來修改類的行為。這是ES7的一個提案，目前Babel轉碼器已經支持

我們在游戲大型項目種經常會用到的方法，現在es6直接支持

想要使用Decorator的話需要我們配置一下文件夾，配置一下環境

npm install babel-plugin-transform-decorators-legacy --save-dev

完事配置一下babelrc文件

"plugins": ["transform-decorators-legacy"]

先說一下裝飾器的特點

裝飾器本質是一個函數

@hometown     hometown()

裝飾對象可以使用多個裝飾器

@hometown("山西")
@school
    class Student{
        constructor(name){
            this.name=name;
        }
        @studyke("HTML")
        study(){
            console.log(this.name+"  is studying"+this.ke+"!")
        }
}

裝飾器可以帶參數

function hometown(diqu){
            //target.home="xx";
            return function(target){
               target.home=diqu;
            }
        }

@hometown("山西")
class...

裝飾器修飾類

function school(target){
            console.log("123")
            target.schoolName="xxxx";
        }
        function hometown(diqu){
            //target.home="xx";
            return function(target){
               target.home=diqu;
            }
        }

        function studyke(kemu){
            return function(target){
                target.ke=kemu;
            }
        }
        @hometown("山西")
        @school
        class Student{
            constructor(name){
                this.name=name;
            }
            @studyke("HTML")
            study(){
                console.log(this.name+"  is studying"+this.ke+"!")
            }
        }
        console.log(Student.schoolName);
        console.log(Student.home);

        let l=new Student("xiaoA");
        l.study();

        @school
        function Teacher(){

        }

GPU云服務器云服務器修飾器 Python修飾器 python類修飾器 decorators

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84169.html

在 Web 應用中使用 ES7 裝飾器（Decorator）初體驗

摘要：前言今天閑來時看了看中的新標準之一，裝飾器。過程中忽覺它和中的注解有一些類似之處，并且當前版本的中已經支持它了，所以，就動手在一個應用中嘗鮮初體驗了一番。另外，由于裝飾器目前還是中的一個提案，其中具體細節可能還會更改。前言今天閑來時看了看ES7中的新標準之一，裝飾器（Decorator）。過程中忽覺它和Java中的注解有一些類似之處，并且當前版本的TypeScript中已經支持它了...

ivan_qhz 2019-08-19 17:27 評論0 收藏0
從裝飾模式到裝飾器

摘要：從裝飾模式到裝飾器裝飾模式裝飾模式的作用是在不修改原有的接口的情況下，讓類表現的更好。它是一個語法糖說完了裝飾模式，我們再看一下在中最新引入的裝飾器。從裝飾模式到裝飾器裝飾模式裝飾模式的作用是：在不修改原有的接口的情況下，讓類表現的更好。什么叫更好？為什么需要裝飾模式自然是繼承有一些問題繼承會導致超類和子類之間存在強耦合性，當超類改變時，子類也會隨之改變；超類的內...

monw3c 2019-08-21 18:23 評論0 收藏0
【用故事解讀 MobX 源碼（四）】裝飾器和 Enhancer

摘要：所以這是一篇插隊的文章，用于去理解中的裝飾器和概念。因此，該的作用就是根據入參返回具體的描述符。其次局部來看，裝飾器具體應用表達式是，其函數簽名和是一模一樣。等裝飾器語法，是和直接使用是等效等價的。 ================前言=================== 初衷：以系列故事的方式展現 MobX 源碼邏輯，盡可能以易懂的方式講解源碼；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 評論0 收藏0
react系列-bind this

摘要：幸運的是，已經提供了對這個新語法的支持。而且函數綁定語法屬于草案中的特性，尚未納入標準。方案和方案會增加代碼量方案需要引入第三方庫，不過提供了很多使用的裝飾器。常用的方案是方案和方案刪除箭頭函數刪除問題對于大多數前端開發來說，JavaScript 的 this 關鍵字會造成諸多困擾，由于 JavaScript 代碼中的 this 指向并不清晰。在寫react應用時，也會也到很多作...

XGBCCC 2019-08-21 14:38 評論0 收藏0
修飾器模式

摘要：更多前端技術和知識點，搜索訂閱號菌訂閱不會改變原有的對象，而是在其基礎上進行拓展。 showImg(https://segmentfault.com/img/remote/1460000019865720?w=640&h=645); ?? 更多前端技術和知識點，搜索訂閱號 JS 菌訂閱不會改變原有的對象，而是在其基礎上進行拓展。實現原理創建一個 A 類 A 類中的屬性和方法使...

Salamander 2019-08-26 10:20 評論0 收藏0