5

es7的Decorators(装饰器)

修饰器(Decorator)是一个函数,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经支持。
需要先安装一个插件:npm install babel-plugin-transform-decorators-legacy --save-dev 然后在项目根目录下,找到:.babelrc=>修改为"plugins": ["transform-decorators-legacy"]

//装饰器本质是一个函数
//装饰对象可以使用多个装饰器
//装饰器可以带参数
//装饰器修饰类,实例方法
//aop 设计思想(log,邮件发送)
function school(target){
    target.schoolName="师徒课堂";
}
function hometown(diqu){
    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("做梦")
    study(){
        console.log(this.name+"在家睡觉"+this.ke);
    }
}
console.log(Student.schoolName);//打印师徒课堂.
console.log(Student.home);//打印黑龙江.

let l = new Student("姜姜");
l.study();//打印姜姜在家睡觉做梦.

@school
class Teacher {
    
}
console.log(Teacher.schoolName);//打印师徒课堂
我们需要babel转成es5,因为很多浏览器还不支持这么高版本的代码

姜筱妍
269 声望10 粉丝

君生我未生,我生君已老。


引用和评论

0 条评论