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);