JS中装饰器到底是什么？
因主要的技术栈是Angular，对于Angular采用的装饰器特别认可，是一种优雅的拦截JS的方式。
TC39的装饰器提案其实共3个：class类和类属性装饰器、function函数装饰器、parameter方法参数装饰器，后2个仍处于Stage 0中，因此本文只针对class装饰器
目前Decorator仍处于Stage 2的阶段，不知道能否在ES2019(ES10)中推出，但一个提案只要能进入Stage 2，就基本会包括在以后的正式标准里面。
有N多文章写道Decorator是ES2016(ES7)推出的，不知道这是从哪里流传出来的，ES2016最终特性根本就没有Decorator，可能的原因：Decorator只是有望在ES2016推出的，实际上并没有。
image
以Angular中的一个组件为例,来说明装饰器的主要用法和装饰器到底是什么:
@Component({
selector: 'app-transfer-common',
templateUrl: './transfer-common.component.html',
styleUrls: ['./transfer-common.component.scss']
})
@AutoUnsubscribe()
export class TransferCommonComponent implements OnInit {
whichRouter: String;
btnShowStatus: ShowOrHideBtn;
queryParamsSubscribe: any;
userInfo: any = this.commonUserService.getUserInfo();
i18ns_common;
constructor(
private router: Router,
private route: ActivatedRoute,
private returnVariousBtn: ReturnVariousRouterParamsService,
private commonUserService: CommonUserService,
private httpService: HttpService,
private translate: TranslateService,
) { }
ngOnInit() {
}
// 跳转到新增
@getProperty
gotoAdd() {
}
/* ngOnDestroy() {
this.queryParamsSubscribe.unsubscribe();
} */
}
一.类装饰器
AutoUnsubscribe是一个自动取消订阅的装饰器，可传入参数指定某个可订阅对象不自动取消订阅。如不需要指定，可取消外层高阶函数
export function AutoUnsubscribe(params: string) {
return function (constructor) {
console.log(constructor);
console.log(constructor.prototype);
const originNgDestory = constructor.prototype.ngOnDestroy;
constructor.prototype.ngOnDestroy = function () {
console.log(this);
console.log(this.constructor);
console.log(constructor);
for (const property of Object.values(this)) {
if (property && (typeof property.unsubscribe === 'function')) {
console.log(property);
}
}
originNgDestory && typeof originNgDestory === 'function' && originNgDestory.apply(this);
};
};
}
1.类装饰器仅仅是一个接受一个参数的、被装饰的类的构造函数,常用于修改、添加类的原型方法
2.类装饰器传入的constructor就是类的constructor(特指constructor(){}),如下图红色部分.类装饰器作用于类的 constructor，并且观察、修改或者替换一个类的定义。
3.this是整个class,如图天蓝色外框
4.特殊的是:类的属性方法在类的proto中,其他的是类的直接子集,如图靑蓝色部分
4.参数constructor === this.constructor
5.执行订阅的时候,订阅的是一个Subscribe对象,property.unsubscribe是从原型链上获取的unsubscribe,如下图绿色部分
image
二.类属性(方法)装饰器
// 下一个事件队列中执行的装饰器
export const timeoutDecorator = function (milliseconds: number = 0) {
return function (target, key, descriptor: any) {
console.log(target); // 即整个对象
console.log(key); // 装饰器修饰的某个key
console.log(descriptor);
const originalMethod = descriptor.value; // value即这个key对应的方法
/** 当执行gotoAdd方法时,即先执行以下函数 */
descriptor.value = function (...args) {
console.log(args);
setTimeout(() => {
originalMethod.apply(this, args); // gotoAdd方法调用
}, milliseconds);
};
console.log(descriptor);
return descriptor;
};
};
export const getProperty = function (target, name, descriptor) {
console.log(target);
console.log(name);
console.log(descriptor);
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
console.log(args);
originalMethod.apply(this, args);
};
console.log(descriptor);
return descriptor;
};
image
1.类方法装饰器是一个函数，函数参数就是Object.defineProperty中的三个参数即：target(目标对象)、key(调用的属性名)、descriptor(调用的属性的描述，包括configurable、enumerable、writable、value)
2.类方法装饰器的作用是把类中的方法放入装饰器中执行，个人理解类似于管道或者拦截器
3.类的普通属性(不是方法的)也可以添加装饰器,比如Angular中的@ViewChild,@ViewContent
三.修饰器本质就是编译时执行的函数
注意，不管哪种修饰器,对类的行为的改变，是代码编译时（初始化时）发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码。也就是说，修饰器本质就是编译时执行的函数。
表现上：添加上装饰器后,装饰器中descriptor.value = function(...args) ...... 函数外的内容会先执行.然后在每次触发类中的修饰的方法是会才会调用descriptor.value = function(...args) ...... 中的内容,args是指触发此方法时的实际参数.再通过apply方法,调用需要修饰的类方法,注意不一定是指向this,也有可能是target,具体看情况
四.特别注意：this
箭头函数中的this和普通函数的this是不同的，注意函数体内是否有this,有的话就不要用箭头函数了,详情请搜索箭头函数的this
