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 yourName(target,key,descriptor){
    descriptor.value=()=>{
        console.log("我是XXX");
    }
    console.log("报上名来")
    return descriptor;  
}
class Monkey{
    @sayYourName
    sayName(){}
}
monkey=new Monkey();
monkey.sayName();
//报上名来
//我是XXX
装饰器函数yourName 参数固定为这个三个 参照object原型函数
Object.defineProperty

2.自身调用

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_26383604/article/details/79060179
ES7
今日推荐