Decorators(修饰器)

本文介绍如何利用装饰器来修饰类实例方法,并展示了如何使用多个装饰器及带参数的装饰器。通过实例演示了装饰器如何改变类的行为。

修饰器(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);//师徒.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值