前言你真的懂装饰器吗？相信用过装饰器的开发者一定会喜欢它的一些特性。无论是react、vue、angular，babel都能支持。当然也有一些封装好的第三方装饰器库，参考后可以实现一些强大的功能。让我们一起简单地看一下。什么是装饰器？装饰器是一个函数，其目的是修改类及其成员。Javascript装饰器还处于草案阶段，目前还没有直接支持这种语法的环境，但是Babel已经支持它的语法转换。它还作为TypeScript中的一项实验性功能而受到支持。在Angular中也大量使用，有许多内置的装饰器。其实就是设计模式中常说的装饰者模式的一种实现。装饰者模式是指在不改变原有类文件或使用继承的情况下，动态扩展对象的功能并为对象添加额外功能的方法。设计模式。为什么要使用装饰器？装饰器方便、高效且更语义化。合理使用装饰器可以大大提高开发效率，封装和细化非内部函数的逻辑代码，帮助我们快速完成重复性工作。Decorator的使用及实例案例一：装饰类基本用法给类添加装饰器，自动将类作为第一个参数传递给装饰器。case2：装饰类，自定义参数。如果觉得一个参数不够用，可以在装饰器函数的外层再包裹一层函数。不仅仅是一个装饰器，利用Vue中的闭包特性，你还可以将指定的参数传递给computed、getter等方法。装饰器在装饰类的属性时，会智能地装饰原型。第一个参数是要装饰的目标元素，第二个参数是属性名，第三个参数是属性的描述对象。行为更改发生在代码编译时，而不是运行时。case3在多个装饰器的嵌套应用中，如果多个装饰器都传递了参数，那么所有装饰器的外部函数都会依次执行。执行完后，使用reduce递归执行得到的内层装饰器函数。case4实现类的多重继承。js中类没有直接的语法来实现多重继承。如果要实现多重继承，只能使用mixin或者getOwnPropertyNames遍历等间接手段。如：classCextendsA,B{}//ErrorclassCextendsAextendsB{}//ErrorMixin方法实现classA{}functionMixin(BaseClass){returnclassextendsBaseClass{mixin(){console.log('this是一个混合继承类的方法，继承生成一个新的表达式类')}}}classCextendsMixin(A){}newC().mixin()//这是一个混合继承的方法-继承类，并继承生成新的表达式类//getOwnPropertyNamesimplementclassCextendB{}for(letkeyofObject.getOwnPropertyNames(A.prototype)){if(key==='constructor')continueObject.defineProperty(C.prototype,key,Object.getOwnPropertyDescriptor(A.prototype,key))}但是有了装饰器，开发者就不用关注上面的具体实现了，@Decorator可以帮你省去很多繁琐的步骤使用装饰器case5其他常用的简单装饰器@readonly装饰器使属性只读classPerson{@readonly//使属性r只读。age(){}}functionreadonly(target,name,descriptor){//描述符对象的原始值如下//{//value:specifiedFunction,//enumerable:false,//configurable:true,//可写：真//};descriptor.writable=false;returndescriptor;}readonly(Person.prototype,'name',descriptor)@getExcuteTime装饰器，获取函数执行开始时间到结束时间的时间，classPerson{something1(){letstart=Date.now()//做一些事情...letend=Date.now()console.log('执行时间:',end-start)}something2(){letstart=Date.now()//做一些事情...letend=Date.now()console.log('Executiontime:',end-start)}}使用装饰器分离时间和业务类Person{@getExcuteTimesomething1(){//dosomething...}@getExcuteTimesomething2(){//dosomething...}}@log装饰器我们不希望日志和业务混在一起，所以使用装饰器就避免了这个问题classPerson{@log('开始第一步')step1(){//dosomething...//函数中不用写打印逻辑}@log('开始第二步')step2(){//dosomething。..}}functionlog(value){returnfunction(target,name,descriptor){//这里可以根据参数console.log(value)打印更详细的信息}}之类的登录（不重复是否登录的逻辑）、aixos等装饰器，我们需要根据具体需求实现其他vue项目中使用的装饰器。官方组件装饰器core-decorators.js提供了一些常用的装饰器方法总结总的来说，装饰器简单易用。合理使用装饰器可以提高我们的开发效率，让代码更易读，更易维护，功能更聚合。另外，如果大家在阅读中发现不合理或错误的地方，请留言指正，万分感谢！如果觉得有帮助，请点赞、关注和支持。再次感谢！作者：tager链接：https://juejin.cn/post/7020406094904164383说明：稀土掘金同步更新版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
