详解es6超好用的语法糖Decorator
Decorator（修饰器/装饰器）是es6提出的语法糖，用于修改类的行为。不过目前主流浏览器都没有很好的支持，我们需要用babel来转换为浏览器能识别的语言。在这篇文章中将介绍decorator的基础用法和一些应用实例。
1.修饰类
(1)基础用法
@testable
classMyClass{}
functiontestable(target){
target.isTestable=true
}
console.log(MyClass.isTestable)//true
贴一下babel转换后的代码，
var_class;
letMyClass=testable(_class=classMyClass{})||_class;
functiontestable(target){
target.isTestable=true;
}
也可以在prototype上修改属性，也可以为修饰器添加多个参数。
@testable(false)
classMyAnotherClass{
}
functiontestable(status){
returntarget=>{target.prototype.isTestable=status}
}
console.log('MyClass.isTestable',MyAnotherClass.prototype.isTestable)//false
当然我们通过修饰器，把某个对象的方法添加到目标类的实例上，注意要在类的prototype上添加。
constfoo={isTestable:true}
functiontestable(...list){
returntarget=>{Object.assign(target.prototype,...list)}
}
@testable(foo)
classMyAnotherClass{}
constobj=newMyAnotherClass()
console.log('MyClass.isTestable',obj.isTestable)//true
(2)应用
在ReactApp的开发中，使用redux通常需要react-redux中的connect方法，将两者结合在一起。通常的写法是：
classMyReactComponentextendsReact.Component{}
exportdefaultconnect(mapStateToProps,mapDispatchToProps)(MyReactComponent);
如果使用decorator，代码可读性更高了一些。
@connect(mapStateToProps,mapDispatchToProps)
exportdefaultclassMyReactComponentextendsReact.Component{}
2.修饰方法
(1).基础用法
//target:在方法中的target指向类的prototype
functionreadonly(target,key,descriptor){
descriptor.writable=false
returndescriptor
}
classMyClass{
@readonly
print(){console.log(`a:${this.a}`)}
}
(2).js中Object的属性
varperson={}
Object.defineProperty(person,'name',{
configurable:false,//能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true
enumerable:false,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true
writable:false,//对象属性是否可修改,flase为不可修改，默认值为true
value:'xiaoming'//对象属性的默认值，默认值为undefined
});
对应到descriptor为下面四个属性：
{
value:specifiedFunction,
enumerable:false,
configurable:true,
writable:true
};
(3).应用
我们开始写一个@log修饰器，可以输出日志：
classMath{
@log
add(a,b){
returna+b
}
}
constmath=newMath()
math.add(1,2)
functionlog(target,name,descriptor){
constoldValue=descriptor.value
descriptor.value=function(){
console.log(`calling${name}with${JSON.stringify(arguments)}`)
returnoldValue.apply(this,arguments)
}
returndescriptor
}
上面的代码中，@log作用是在返回结果前，打印函数名和其参数，起到输出日至的作用。上面的程序运行后，控制台将输出：
callingaddwith{"0":1,"1":2}
(4).多个修饰器
良好命名的修饰器可以起到简洁注释的作用，如下：
classExample{
@readonly
@enumable
method(){}
}
多个修饰器的执行顺序是由外向内进入；再由内向外执行。
classExample{
@decorator(1)
@decorator(2)
method(){}
}
functiondecorator(id){
console.log('idis',id)
return(target,property,descriptor)=>console.log('executed',id)
}
控制台输出
idis 1
idis 2
executed2
executed1
附录：babel配置
babel插件transform-decorators还没有正式版，我们可以用transform-decorators-legacy。
安装babel
yarnaddbabel-plugin-transform-decorators-legacybabel-preset-es2017
配置.babelrc
{
"presets":["es2017"],
"plugins":[
"transform-decorators-legacy"
]
}
执行编译后的文件
因为我们为了测试，没必要非得放在浏览器里看了，可以用node执行babel转换后的文件。直接运行yarnstart。
//package.json
"scripts":{
"build":"babel./decorator-dlib",
"start":"yarnbuild&&node./lib/index.js"
},
参考链接
ECMAScript6入门--修饰器
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。