ES7 Decorators（修飾器）

張漢慶發(fā)布于2019-08-20 18:11 / 2764人閱讀

ES6 Decorators（修飾器）

修飾器（Decorator）是一個(gè)函數(shù)，用來修改類的行為。這是ES7的一個(gè)提案，目前Babel轉(zhuǎn)碼器已經(jīng)支持

我們?cè)谟螒虼笮晚?xiàng)目種經(jīng)常會(huì)用到的方法，現(xiàn)在es6直接支持

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

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

完事配置一下babelrc文件

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

先說一下裝飾器的特點(diǎn)

裝飾器本質(zhì)是一個(gè)函數(shù)

@hometown     hometown()

裝飾對(duì)象可以使用多個(gè)裝飾器

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

裝飾器可以帶參數(shù)

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(){

        }

云服務(wù)器 GPU云服務(wù)器修飾器 Python修飾器 python類修飾器 decorators

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84169.html

相關(guān)文章

在 Web 應(yīng)用中使用 ES7 裝飾器（Decorator）初體驗(yàn)

摘要：前言今天閑來時(shí)看了看中的新標(biāo)準(zhǔn)之一，裝飾器。過程中忽覺它和中的注解有一些類似之處，并且當(dāng)前版本的中已經(jīng)支持它了，所以，就動(dòng)手在一個(gè)應(yīng)用中嘗鮮初體驗(yàn)了一番。另外，由于裝飾器目前還是中的一個(gè)提案，其中具體細(xì)節(jié)可能還會(huì)更改。前言今天閑來時(shí)看了看ES7中的新標(biāo)準(zhǔn)之一，裝飾器（Decorator）。過程中忽覺它和Java中的注解有一些類似之處，并且當(dāng)前版本的TypeScript中已經(jīng)支持它了...

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

摘要：從裝飾模式到裝飾器裝飾模式裝飾模式的作用是在不修改原有的接口的情況下，讓類表現(xiàn)的更好。它是一個(gè)語(yǔ)法糖說完了裝飾模式，我們?cè)倏匆幌略谥凶钚乱氲难b飾器。從裝飾模式到裝飾器裝飾模式裝飾模式的作用是：在不修改原有的接口的情況下，讓類表現(xiàn)的更好。什么叫更好？為什么需要裝飾模式自然是繼承有一些問題繼承會(huì)導(dǎo)致超類和子類之間存在強(qiáng)耦合性，當(dāng)超類改變時(shí)，子類也會(huì)隨之改變；超類的內(nèi)...

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

摘要：所以這是一篇插隊(duì)的文章，用于去理解中的裝飾器和概念。因此，該的作用就是根據(jù)入?yún)⒎祷鼐唧w的描述符。其次局部來看，裝飾器具體應(yīng)用表達(dá)式是，其函數(shù)簽名和是一模一樣。等裝飾器語(yǔ)法，是和直接使用是等效等價(jià)的。 ================前言=================== 初衷：以系列故事的方式展現(xiàn) MobX 源碼邏輯，盡可能以易懂的方式講解源碼；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 評(píng)論0 收藏0
react系列-bind this

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

XGBCCC 2019-08-21 14:38 評(píng)論0 收藏0
修飾器模式

摘要：更多前端技術(shù)和知識(shí)點(diǎn)，搜索訂閱號(hào)菌訂閱不會(huì)改變?cè)械膶?duì)象，而是在其基礎(chǔ)上進(jìn)行拓展。 showImg(https://segmentfault.com/img/remote/1460000019865720?w=640&h=645); ?? 更多前端技術(shù)和知識(shí)點(diǎn)，搜索訂閱號(hào) JS 菌訂閱不會(huì)改變?cè)械膶?duì)象，而是在其基礎(chǔ)上進(jìn)行拓展。實(shí)現(xiàn)原理創(chuàng)建一個(gè) A 類 A 類中的屬性和方法使...

Salamander 2019-08-26 10:20 評(píng)論0 收藏0