ES6-ES7 Decorator基础应用

1.安装编译Decorator所需要的依赖项

2.npx babel 当前需要编译文件 -o 编译后的文件

浏览器无法识别es7的语言，需要通过babel工具辅助编译，业务需求使用编译后的文件

3.Decorator代码实例演示如下代码

class Decoration {
      constructor() {
        this.keyValue = "";
      }
      @statement //装饰器命名
      url = "aaa"; //被装饰的属性
      agent() {
        console.log(this.url + "----------" + this.keyValue);
      }
    }

    function statement(proto, key, descriptor) {
    
      console.log(proto, key, descriptor);
      descriptor.writable = false; //被装饰属性不可写
      
    }

    var os = new Decoration();

• 私有属性 console.log(proto,key,descriptor) 结果如下所示

4.装饰私有 属性修改值

function statement(proto, key, descriptor) {

	  descriptor.writable = false
      console.log( descriptor.initializer() ) //被装饰的属性值；装饰私有属性特有的一个属性
      
      descriptor.initializer = function() {
          return 'url的值被修改了'
      }
    }

5.装饰原型属性

class Decoration {
      constructor() {
        this.keyValue = "";
      }
      @pro //装饰原型属性
      agent() {
        console.log(this.url + "----------" + this.keyValue);
      }
    }
    
    function pro(proto, key, descriptor){
        console.log(proto, key, descriptor)//打印结果如下图; 
        let oldValue = descriptor.value //被装饰的函数
         descriptor.value = function(){
             console.log('被装饰的函数重写')
         }
    }
    
    var os = new Decoration();
    	os.agent()

• 原型属性 console.log(proto, key, descriptor) 打印结果如下图

• 装饰原型属性 descriptor 对象上多了value属性，没有initializer属性
• 个人理解是区别装饰私有属性和原型属性的区别特性之一
• 装饰箭头函数时，会被认为是在装饰私有属性，这点要多加留意，稍不慎就掉坑

6.装饰器代理思想模拟

class Decoration {
      constructor() {
        this.keyValue = "";
      }
      @pro //装饰原型属性
      agent() {
        console.log(this.url + "----------" + this.keyValue);
        return  '返回值+520'
      }
    }
    
   function pro(proto, key, descriptor){
        console.log(proto, key, descriptor)
        let oldValue = descriptor.value //被装饰的函数
         descriptor.value = function(){
             var urlB = 'bbb'
             console.log(urlB + '---------' + this.keyValue)
             return oldValue.apply(this,arguments) // 不要忘记return;不然返回值是undefind
         }
    }
    
    var os = new Decoration();
    var result = os.agent()
    console.lo(result)//打印结果是 '返回值+520'

7.类函数装饰器

		@skin
		class Decoration {
		      constructor() {
		        this.keyValue = "";
		      }
		}
		function skin(traget){
			traget.age = '18' //添加一个属性age并赋值18
		}

8.装饰器最后总结

在原有的基础函数上，不扰乱原先的代码，拓展一些额外的功能函数，从而达到装饰的作用！！！