美文网首页
es6学习笔记整理(十六)Decorators

es6学习笔记整理(十六)Decorators

作者: 尤樊容 | 来源:发表于2018-03-15 09:14 被阅读43次
    Decorator修饰器

    修饰器是一个函数用来修改类的行为:

    • 1、修饰器是一个函数
    • 2、修改行为
    • 3、修改类的行为(修饰器只在类的范围类有用)
    • 需要安装babel-plugin-transform-decorators-legacy包
    • function(修改的类本身,修改的属性名称,该属性的描述对象)
    //类里面
    let readonly = function (target, name, descriptor){
        descriptor.writable = false;
        return descriptor;
    };
    
    class Test{
        @readonly //@加上上面的函数名
        time(){
            return '2018-03-14';
        }
    }
    
    let test = new Test();
    test.time = function (){
        console.log('1234-45-67');
    };
    console.log(test.time());//由于是只读,所以会报错
    

    类外面,有一定要在class前面

    //        静态属性
    let typename = function (target, name, descriptor){
        target.myname = 'hello';
    };
    
    @typename
    class Test{
    
    }
    
    console.log(Test.myname);//hello
    //第三方修饰器的js库,需要安装core-decorators;npm install core-decorators
    
    案例:日志系统
            let log = (type) => {
                return function (target, name, descriptor){
                    let src_method = descriptor.value;
                    descriptor.value=(...arg)=>{
                        src_method.apply(target, arg);
                        cosnole.log(`log ${type}`);
                    }
                }
            };
    
            class AD{
                @log('show')
                show(){
                    console.log('ad is show');
                }
    
                @log('click')
                click(){
                    console.log('ad is click');
                }
            }
    
            let ad = new AD();
            ad.show();//ad is show
            ad.click();//ad is click
    

    到这里也只是大致了解,想要会用还是要更深入的去学习,以后有这方面运用再来补充。

    相关文章

      网友评论

          本文标题:es6学习笔记整理(十六)Decorators

          本文链接:https://www.haomeiwen.com/subject/sqqofftx.html