es7装饰器小入门

es7 装饰器 简单梳理

安装

npm i babel-plugin-transform-decorators-legacy babel-register --save-dev
安装：
babel-plugin-transform-decorators-legacy 
babel-register

transform-decorators-legacy：
是第三方插件，用于支持decorators

babel-register：
用于接入node api
运行方法一：命令行操作

babel --plugins transform-decorators-legacy input.js>input.es5.js
然后直接运行es5的代码
运行方法二：require hook

require('babel-register')({
    plugins: ['transform-decorators-legacy']
});
require("./input.js")

1.声明一个装饰器函数

 function decorate(target, key, descriptor) {
	 const method = descriptor.value;
	 let newCounr= 10;
	 let ret;
	 descriptor.value = (...args)=>{
	 args[0] += newCounr;
	 ret = method.apply(target, args);
	 return ret;
	 }
	 return descriptor;
}

class Count{
	 constructor(a= 1 ,b = 2,c = 3){
	 this.init(a,b,c);
	 }
	@decorate
	 init(a,b,c){
	 this.a= a; 
	 this.b= b; 
	 this.c= c; 
	 }
	 toString(){
	 return `a:${this.a},b:${this.b},c:${this.c}`;
	 }
}

var count= new Count();

// 假如不加 @decorate
// 输出：console.log(`当前 ===> ${count}`);
// 输出：当前===> a:1,b:2,c:3
// 添加 @decorate
// 输出：console.log(`当前 ===> ${count}`);
// 输出：当前===> a:11,b:2,c:3
装饰器函数参数固定为这个三个 参照object原型函数
Object.defineProperty

2.自身调用

function newD(value){
return function (target) {
        target.text = value;
    }
}
@newD("文本1")
class Text1 { }

@newD("文本2")
class Text2 { }

console.log(Text1.call);
console.log(Text2.call);