4

修饰器(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);//师徒.

师妹儿
195 声望9 粉丝

html/css/html5/javascript/jquery/es6/svg