2023年6月29日发(作者：)

JavaScript装饰器Decorator前⾔许多⾯向对象都有decorator(装饰器)函数，⽐如python中也可以⽤decorator函数来强化代码，decorator相当于⼀个⾼阶函数，接收⼀个函数，返回⼀个被装饰后的函数。下⾯的⽰例代码，就是⽤装饰器logDecorator，来将函数进⾏封装，每次调⽤时，控制台就会显⽰被调⽤的函数名和时间。import time def logDecorator(func): def wrapper(*args, **kw): print('%s %s():' % ('调⽤函数', func.__name__)) return func(*args, **kw) return wrapper@logDecoratordef now(): print((()))if __name__ == '__main__': now()回到JavaScriptjavascript中也有decorator相关的提案，只是⽬前node以及各浏览器中均不⽀持。只能通过安装babel插件来转换代码，插件名叫这个：transform-decorators-legacy。在babel官⽹的在线试⽤，安装好transform-decorators-legacy插件，就能看到转义后的代码了，如下// 这是源代码@testableclass MyTestableClass { // ...}@testableclass MyTestableClass2 { // ...}function testable(target) { able = true;}able // true这是转义后的："use strict";var _class, _class2;function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }var MyTestableClass = testable(_class = function MyTestableClass() { _classCallCheck(this, MyTestableClass);}) || _class;var MyTestableClass2 = testable(_class2 = function MyTestableClass2() { _classCallCheck(this, MyTestableClass2);}) || _class2;function testable(target) { able = true;}able; // true可以从上看出，js中的装饰器就是，调⽤装饰器函数，对类class进⾏⼀层封装。如果装饰器函数有返回值，就取该值赋值给原class，没有返回值就还是取原class。装饰类的属性可以看到python中的装饰器代码，是对⼀个函数进⾏装饰，但是在js⾥却不⾏。具体原因好像是因为，函数声明的提升。所以只能装饰class，或class的属性。function readonly(target, name, descriptor){ le = false; return descriptor;}class Person { @readonly name() { return `${} ${}` }}如上代码就是对class的name属性进⾏装饰，此时的decorator函数接收三个参数：类的原型对象、被装饰的属性、被装饰的属性的修饰符对象。然后再根据这些参数进⾏装饰。decorator装饰属性时，其实不⽤返回值也可以，然后也⽀持多个decorator⼀并使⽤来装饰同⼀个属性。class Person { @readonly @validate name() { return `${} ${}` }}⼩结随着es6提出了class的概念之后，在某些场景需要为class或class的属性，进⾏额外的修饰或注释。decorator的作⽤就是在此，它是⼀种对class声明以及class属性的元编程，同时也是注释。