es6装饰器是什么及怎么使用-前端-云技术

文章页正文上

本篇内容介绍了“es6装饰器是什么及怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在es6中，装饰者模式是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论；装饰者其本质就是一个普通的函数，用于扩展类属性和类方法。使用装饰器的优点：1、代码可读性变强了，装饰器命名相当于一个注释；2、在不改变原有代码情况下，对原来功能进行扩展。Decorator，即装饰器，从名字上很容易让我们联想到装饰者模式简单来讲，装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论。ES6中Decorator功能亦如此，其本质也不是什么高大上的结构，就是一个普通的函数，用于扩展类属性和类方法这里定义一个士兵，这时候他什么装备都没有


classsoldier{
}

定义一个得到 AK 装备的函数，即装饰器


functionstrong(target){
target.AK=true
}

使用该装饰器对士兵进行增强


@strong
classsoldier{
}

这时候士兵就有武器了


soldier.AK//true

上述代码虽然简单，但也能够清晰看到了使用Decorator（装饰器）两大优点：代码可读性变强了，装饰器命名相当于一个注释在不改变原有代码情况下，对原来功能进行扩展装饰器的用法Docorator修饰对象为下面两种：类的装饰类属性的装饰类的装饰当对类本身进行装饰的时候，能够接受一个参数，即类本身将装饰器行为进行分解，大家能够有个更深入的了解


@decorator
classA{}

//等同于

classA{}
A=decorator(A)||A;

下面@testable就是一个装饰器，target就是传入的类，即MyTestableClass，实现了为类添加静态属性


@testable
classMyTestableClass{
//...
}

functiontestable(target){
target.isTestable=true;
}

MyTestableClass.isTestable//true

如果想要传递参数，可以在装饰器外层再封装一层函数


functiontestable(isTestable){
returnfunction(target){
target.isTestable=isTestable;
}
}

@testable(true)
classMyTestableClass{}
MyTestableClass.isTestable//true

@testable(false)
classMyClass{}
MyClass.isTestable//false

类属性的装饰当对类属性进行装饰的时候，能够接受三个参数：类的原型对象需要装饰的属性名装饰属性名的描述对象首先定义一个readonly装饰器


functionreadonly(target,name,descriptor){
descriptor.writable=false;//将可写属性设为false
returndescriptor;
}

使用readonly装饰类的name方法


classPerson{
@readonly
name(){return`${this.first}${this.last}`}
}

相当于以下调用


readonly(Person.prototype,'name',descriptor);

如果一个方法有多个装饰器，就像洋葱一样，先从外到内进入，再由内到外执行


functiondec(id){
console.log('evaluated',id);
return(target,property,descriptor)=>console.log('executed',id);
}

classExample{
@dec(1)
@dec(2)
method(){}
}
//evaluated1
//evaluated2
//executed2
//executed1

外层装饰器@dec(1)先进入，但是内层装饰器@dec(2)先执行注意
装饰器不能用于修饰函数，因为函数存在变量声明情况


varcounter=0;

varadd=function(){
counter++;
};

@add
functionfoo(){
}

编译阶段，变成下面


varcounter;
varadd;

@add
functionfoo(){
}

counter=0;

add=function(){
counter++;
};

意图是执行后counter等于 1，但是实际上结果是counter等于 0装饰器的使用场景基于Decorator强大的作用，我们免费云主机、域名能够完成各种场景的需求，下面简单列举几种：使用react-redux的时候，如果写成下面这种形式，既不雅观也很麻烦


classMyReactComponentextendsReact.Component{}

exportdefaultconnect(mapStateToProps,mapDispatchToProps)(MyReactComponent);

通过装饰器就变得简洁多了


@connect(mapStateToProps,mapDispatchToProps)
exportdefaultclassMyReactComponentextendsReact.Component{}

将mixins，也可以写成装饰器，让使用更为简洁了


functionmixins(...list){
returnfunction(target){
Object.assign(target.prototype,...list);
};
}

//使用
constFoo={
foo(){console.log('foo')}
};

@mixins(Foo)
classMyClass{}

letobj=newMyClass();
obj.foo()//"foo"

下面再讲讲core-decorators.js几个常见的装饰器@antobindautobind装饰器使得方法中的this对象，绑定原始对象


import{autobind}from'core-decorators';

classPerson{
@autobind
getPerson(){
returnthis;
}
}

letperson=newPerson();
letgetPerson=person.getPerson;

getPerson()===person;
//true

@readonlyreadonly装饰器使得属性或方法不可写


import{readonly}from'core-decorators';

classMeal{
@readonly
entree='steak';
}

vardinner=newMeal();
dinner.entree='salmon';
//Cannotassigntoreadonlyproperty'entree'of[objectObject]

@deprecatedeprecate或deprecated装饰器在控制台显示一条警告，表示该方法将废除


import{deprecate}from'core-decorators';

classPerson{
@deprecate
facepalm(){}

@deprecate('功能废除了')
facepalmHard(){}
}

letperson=newPerson();

person.facepalm();
//DEPRECATIONPerson#facepalm:Thisfunctionwillberemovedinfutureversions.

person.facepalmHard();
//DEPRECATIONPerson#facepalmHard:功能废除了

“es6装饰器是什么及怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！

相关推荐: es6中object新增了什么方法

这篇文章主要介绍了es6中object新增了什么方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6中object新增了什么方法文章都会有所收获，下面我们一起来看看吧。 es6中的object方法：1、“Object.is()…

文章页内容下

es6装饰器是什么及怎么使用

相关推荐

推荐AD:

云服务器免费，网站空间免费，等你哦

置顶推荐

热门专题

热门标签

活跃读者

网站统计

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等，SSL部署；安全高速企业专供99.999%稳定，另有高防主机、不限制内容等类型，具体可咨询QQ:360163164,Tel同微信：18905205712

切换注册登录

切换登录注册