课程名称: 晋级TypeScript高手,成为抢手的前端开发人才
课程章节: 10-13 【方法装饰器】方法装饰器的实现
课程讲师: keviny79
课程内容:
方法装饰器使用:
1.不带参数的"方法装饰器"写法
// 声明没有参数的方法装饰器 function MyMethodDecorator( targetClassPrototype: any, key: string, methodDecri: PropertyDescriptor ) { console.log("targetClassPrototype:", targetClassPrototype); // console.log("key:", key); console.log("methodDecri:", methodDecri); methodDecri.value(); } class RoleService { public roleName: string = "管理员"; constructor() {} // 直接在方法上使用 @ + 参数器名称 @MyMethodDecorator DistribRoles() { // 分配角色 console.log("分配角色....."); } }
2.带参数的"方法装饰器"写法:
// 声明带参数的方法装饰器 function MyMethodDecorator(methodPath: string) { return function ( targetClassPrototype: any, key: string, methodDecri: PropertyDescriptor ) { // 使用外界传递参数 console.log("methodPath:", methodPath); console.log("targetClassPrototype:", targetClassPrototype); // console.log("key:", key); console.log("methodDecri:", methodDecri); methodDecri.value(); }; } class RoleService { public roleName: string = "管理员"; constructor() {} // 直接在方法上使用 @ + 参数器名称 + ([...参数]) @MyMethodDecorator("/searchFood") DistribRoles() { // 分配角色 console.log("分配角色....."); } }
知道了 “方法装饰器”的写法,发现“类装饰器”可以接收一个参数,“方法装饰器”要接收三个参数,分别是:
targetClassPrototype 参数
这里表示是类的原型对象
key 参数
这里的 key 就是方法名称
methodDecri 参数
methodDecri “数据属性”由 js自带的, 就是控制函数的属性的。有如下这些属性:
{ configurable?: boolean; // 是否能参数 enumerable?: boolean; // 是否能使用for in 来循环返回对象的属性 value?: any; // 属性的值 writable?: boolean; //是否是可写属性 get?(): any; //在读取属性时调用的函数, set?(v: any): void; //在写入属性时调用的函数 }
课程收获:
明白“方法装饰器”带参数和不带参数的使用。
明白“方法装饰器”中三个参数的意义