资讯专栏INFORMATION COLUMN

Decorators(修饰器)

1treeS / 1981人阅读

摘要:修饰器是一个函数,用来修改类的行为。装饰对象可以使用多个装饰器装饰器可以带参数装饰器修饰类实例方法师徒相当于一个修饰器需要先安装一个插件然后在项目根目录下,找到修改为在文件里引用师徒大广灵啦啦啦师徒广灵县在啦啦啦师徒

修饰器(Decorator)是一个函数,用来修改类的行为。 装饰对象可以使用多个装饰器 装饰器可以带参数 装饰器 修饰类 实例方法
"use strict"

function school(){
        console.log("师徒");
    }

    @school
    class Student{
        constructor(name){
            this.name=name
        }
        study(){
            console.log(this.name+" is studying");
        }
    }
@school相当于一个修饰器
需要先安装一个插件:

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

然后在项目根目录下,找到:

.babelrc=>修改为"plugins": ["transform-decorators-legacy"]

在html文件里引用:

function school(target){
    target.schoolName="师徒";
    }
    function hometown(diq){
        return function(target){
            target.home=diq;
        }
    }
    function studyke(kemu){
        return function(target){
            target.ke=kemu;
        }
    }
    
    @hometown("大广灵")
    @school
    
    class Student {
        constructor(name){
            this.name=name;
        }
        @studyke("jquery")
        study(){
            console.log(this.name+"啦啦啦"+this.ke);
        }
    }
    console.log(Student.schoolName);//师徒.
    console.log(Student.home);//广灵县.
    
    let l = new Student("ss");
    l.study();//ss在啦啦啦jquery.
    
    @school
    class Teacher {
        
    }
    console.log(Teacher.schoolName);//师徒.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84171.html

相关文章

  • ES7 Decorators修饰

    ES6 Decorators(修饰器) 修饰器(Decorator)是一个函数,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经支持 我们在游戏大型项目种经常会用到的方法,现在es6直接支持 想要使用Decorator的话需要我们配置一下文件夹,配置一下环境 npm install babel-plugin-transform-decorators-legacy --save-de...

    张汉庆 评论0 收藏0
  • 装饰与元数据反射(1)方法装饰

    摘要:使用装饰器的方法很简单在装饰器名前加字符,写在想要装饰的方法上,类似写注释的方式装饰器实际上是一个函数,入参为所装饰的方法,返回值为装饰后的方法。经过装饰过的方法,它依然按照原来的方式执行,只是额外执行了附件的装饰器函数的功能。 让我来深入地了解一下TypeScript对于装饰器模式的实现,以及反射与依赖注入等相关特性。 在Typescript的源代码中,可以看到装饰器能用来修饰cla...

    xiaochao 评论0 收藏0
  • 聊聊Typescript中的设计模式——装饰篇(decorators)

    摘要:本文从装饰模式出发,聊聊中的装饰器和注解。该函数的函数名。不提供元数据的支持。中的元数据操作可以通过包来实现对于元数据的操作。   随着Typescript的普及,在KOA2和nestjs等nodejs框架中经常看到类似于java spring中注解的写法。本文从装饰模式出发,聊聊Typescipt中的装饰器和注解。 什么是装饰者模式 Typescript中的装饰器 Typescr...

    yiliang 评论0 收藏0
  • create-react-app mobx 不支持 修饰

    摘要:返编译全部重新安装依赖安装该模块中间可能有告警自行消除即可在里修改如下所示就可以了 1.npm run eject (返编译)2.npm i (全部重新安装依赖)3.npm install --save-dev babel-plugin-transform-decorators-legacy (安装该模块中间可能有告警自行消除即可)4.npm install @babel/plugin...

    Vultr 评论0 收藏0
  • 从装饰模式到装饰

    摘要:从装饰模式到装饰器装饰模式装饰模式的作用是在不修改原有的接口的情况下,让类表现的更好。它是一个语法糖说完了装饰模式,我们再看一下在中最新引入的装饰器。 从装饰模式到装饰器 装饰模式 装饰模式的作用是:在不修改原有的接口的情况下,让类表现的更好。 什么叫更好? 为什么需要装饰模式 自然是继承有一些问题继承会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之改变; 超类的内...

    monw3c 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<