- 普通装饰器
-
function logClass(params: any) { console.log(params) // 当前类 [Function: HttpClient] params.prototype.apiUrl = 'xxx' } // 普通装饰器 @logClass class HttpClient { constructor() { } getData() { } } const http: any = new HttpClient(); console.log(http.apiUrl) // 打印xxx - 装饰器工厂
-
namespace B { function logClass(params: string) { return function (target: any) { console.log(target);// 当前类 [Function: HttpClient] console.log(params); // 装饰器参数 welcome target.prototype.apiUrl = 'HTTPS'; } } // 调用装饰器 // 这里表示把 xiaochen 赋值给了 params，把 HttpClient类 赋值给了 target @logClass('welcome') class HttpClient { constructor() { } getData() { } } // 查看当前类的实例 var http: any = new HttpClient(); console.log(http.apiUrl); // 打印出动态扩展的属性 HTTPS } - 属性装饰器
-
// 类装饰器 function logClass(params: string) { return function (target: any) { console.log(target); console.log(params); } } // 属性装饰器 function logProperty(params: string) { // target 类的原型对象 return function (target: any, attr: any) { console.log(target); console.log(attr); // 属性装饰器里面的target就相当于类装饰器里面的target.prototype // 就是类的原型对象，就可以修改类原型对象上面的属性 target[attr] = params; } } // 调用装饰器 @logClass('XXX') class HttpClient { // 注意：装饰器的后面不需要加上分号 @logProperty('HHHHHHH') public apiUrl: string | undefined; constructor() { } getData() { console.log(this.apiUrl); } } // 查看当前类的实例 var http: any = new HttpClient(); http.getData(); // 打印输出 HHHHHHH - 方法装饰器
-
function logMethod(params: any) { console.log(params) return function (target: any, methodName: any, desc: any) { console.log(target); // 原型对象 HttpClient { getData: [Function] } console.log(methodName); //成员名称 getData console.log(desc); //描述符 { value: [Function],writable: true,enumerable: true, configurable: true } // 修改装饰器的方法 console.log(desc.value); //[Function] // 修改装饰器的方法 把装饰器方法里面传入的所有参数改为string类型 // 保存当前的方法 var oMethod = desc.value; desc.value = function (...args: any[]) { args = args.map((value) => { return String(value); }) // 打印出所有的参数 console.log(args); // [ '123', 'XXX' ] oMethod.apply(this, args); // 可以同时打印出getData方法里面的输出值，并且打印出传入的数据值 } } } class HttpClient { // 注意：装饰器的后面不需要加上分号 public apiUrl: string | undefined; constructor() { } @logMethod('方法装饰器') getData(...args: any[]) { console.log(args); console.log('我是getData里面的方法'); } } // 查看当前类的实例 var http: any = new HttpClient(); http.getData(123, 'XXX') - 方法参数装饰器
-
function logMethod(params: any) { return function (target: any, paramsName: any, paramsIndex: any) { console.log(params); // 打印输出 uid console.log(target); // 原型对象 HttpClient { getData: [Function] } console.log(paramsName); //方法名 --- getData console.log(paramsIndex); //索引 --- 0 target.apiUrl = params; } } class HttpClient { public apiUrl: string | undefined; constructor() { } getData(@logMethod('uid') uid: any) { console.log(arguments);// [Arguments] { '0': 12333 } console.log('我是getData里面的方法'); } } // 查看当前类的实例 var http: any = new HttpClient(); http.getData(12333); // 打印出apiUrl console.log(http.apiUrl); // 打印输出 uid - 装饰器执行顺序
-
// 类装饰器 function logClass(params: string) { console.log('类装饰器执行') return function (target: any) { console.log(target); console.log(params); } } // 方法装饰器 function loggerMethod(params: any) { console.log(params) return function (target: any, methodName: any, desc: any) { console.log(target); // 原型对象 HttpClient { getData: [Function] } console.log(methodName); //成员名称 getData console.log(desc); //描述符 { value: [Function],writable: true,enumerable: true, configurable: true } // 修改装饰器的方法 console.log(desc.value); //[Function] // 修改装饰器的方法 把装饰器方法里面传入的所有参数改为string类型 // 保存当前的方法 var oMethod = desc.value; desc.value = function (...args: any[]) { args = args.map((value) => { return String(value); }) // 打印出所有的参数 console.log(args); // [ '123', 'XXX' ] oMethod.apply(this, args); // 可以同时打印出getData方法里面的输出值，并且打印出传入的数据值 } } } // 属性装饰器 function logProperty(params: string) { console.log('属性装饰器执行') // target 类的原型对象 return function (target: any, attr: any) { console.log(target); console.log(attr); // 属性装饰器里面的target就相当于类装饰器里面的target.prototype // 就是类的原型对象，就可以修改类原型对象上面的属性 target[attr] = params; } } function logMethod(params: any) { console.log('方法参数装饰器执行') return function (target: any, paramsName: any, paramsIndex: any) { console.log(params); // 打印输出 uid console.log(target); // 原型对象 HttpClient { getData: [Function] } console.log(paramsName); //方法名 --- getData console.log(paramsIndex); //索引 --- 0 target.apiUrl = params; } } // 调用装饰器 @logClass('XXX') class HttpClient { // 注意：装饰器的后面不需要加上分号 @logProperty('HHHHHHH') public apiUrl: string | undefined; constructor() { } @loggerMethod('方法装饰器执行') getData(@logMethod('uid') uid: any) { console.log(arguments);// [Arguments] { '0': 12333 } console.log('我是getData里面的方法'); } } // 查看当前类的实例 var http: any = new HttpClient(); http.getData(666); // 打印输出 HHHHHHH - 打印如下 属性装饰器 方法装饰器 方法参数装饰器 类装饰器
-
属性装饰器执行 HttpClient { getData: [Function] } apiUrl 方法装饰器执行 方法参数装饰器执行 uid HttpClient { getData: [Function], apiUrl: 'HHHHHHH' } getData 0 HttpClient { getData: [Function], apiUrl: 'uid' } getData { value: [Function], writable: true, enumerable: true, configurable: true } [Function] 类装饰器执行 [Function: HttpClient] XXX [ '666' ] [Arguments] { '0': '666' } 我是getData里面的方法
本文详细介绍了JavaScript中的装饰器，包括普通装饰器、装饰器工厂、属性装饰器、方法装饰器和方法参数装饰器的使用方式及执行顺序。通过示例展示了如何使用装饰器动态扩展类的功能，如设置属性、修改方法行为等。
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
