装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展它们的功能。装饰器的写法有普通装饰器（无法传参）和 装饰器工厂（可传参）两种。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。
1. 类装饰器
代码语言：javascript复制// 装饰器
function logClass(params:any){
// params就是当前的类HttpClient
// 通过装饰器给类扩展属性
params.prototype.url="www.baidu.com";
// 通过装饰器给类扩展方法
params.prototype.run = function(){
console.log('this is run function');
}
}
@logClass
class HttpClient{
constructor(){
}
getData(){
}
}
var http = new HttpClient();
console.log(http.url);
// www.baidu.com
http.run();
// this is run function'装饰器可以传参数，俗称装饰器工厂。
代码语言：javascript复制// 装饰器
function logClass(params:any){
return function(target:any){
// target就是当前的类HttpClient
// 通过装饰器给类扩展属性
target.prototype.url = params;
// 通过装饰器给类扩展方法
target.prototype.run = function(){
console.log(this.url);
};
}
}
@logClass('www.baidu.com')
class HttpClient{
constructor(){
}
getData(){
}
}
var http = new HttpClient();
console.log(http.url);
// www.baidu.com
http.run();
// www.baidu.com类装饰器还可以重载构造函数。
代码语言：javascript复制function logClass(target:any){
// tartget为当前类HttpClient
return class extends target{
// 重载构造函数里的属性与方法
url:any = '我是装饰器里的url';
getData(){
this.url = '我是装饰器里修改过后的url';
console.log(this.url);
}
}
}
@logClass
class HttpClient{
public url:string | undefined;
constructor(){
this.url = '我是构造函数里的url'
}
getData(){
console.log(this.url);
}
}
var http = new HttpClient();
http.getData();
// 我是装饰器里修改过后的url2. 属性装饰器
属性装饰器接受两个参数，第一个为类的构造函数或是原型对象，第二个为当前装饰的参数。
代码语言：javascript复制// 属性装饰器
function logPrototype(params:string){
return function(target:any,attr:any){
// target 如果是静态成员则是类的构造函数
// target 如果是实例成员则是类的原型对象
// attr 为当前的参数
target[attr]=params;
}
}
class HttpClient{
@logPrototype('www.qq.com')
public url:string | undefined;
constructor(){
}
getData(){
console.log(this.url);
}
}
var http = new HttpClient();
http.getData();
// www.qq.com3.方法装饰器
属性装饰器接受三个参数，第一个为类的构造函数或是原型对象，第二个为成员的名字，第三个为成员的属性描述。
代码语言：javascript复制// 方法装饰器
function logMethod(params:any){
return function(target:any,methodName:any,desc:any){
// target 如果是静态成员则是类的构造函数
// target 如果是实例成员则是类的原型对象
// methodName 为当前方法
// desc 为方法的描述,包含是配置、枚举、可写等信息
// 在装饰里扩展类的属性和方法
target.apiUrl = 'www.qq.com';
target.run = function(){
console.log('this is run function');
}
}
}
class HttpClient{
public url:string | undefined;
constructor(){}
@logMethod('www.baidu.com')
getData(){
}
}
var http = new HttpClient();
// console.log(http.apiUrl);
// www.qq.com
// http.run();
// this is run function通过装饰器修改方法
代码语言：javascript复制// 方法装饰器
function logMethod(params:any){
return function(target:any,methodName:any,desc:any){
// target 如果是静态成员则是类的构造函数
// target 如果是实例成员则是类的原型对象
// methodName 为当前方法
// desc 为方法的描述,包含是配置、枚举、可写等信息
// 修改装饰器的方法
// 把装饰器方法里所传入的参数全部改为string类型
// 1.保存之前的方法
var oldMethod = desc.value;
// 2.操作数据
desc.value = function(...args:any[]){
args = args.map((value)=>{
return String(value);
})
// 3.对象冒充继承
oldMethod.apply(this,args);
}
}
}
class HttpClient{
public url:string | undefined;
constructor(){}
@logMethod('www.baidu.com')
getData(...args:any[]){
console.log(args);
console.log('this is getData function')
}
}
var http = new HttpClient();
http.getData(1000,2000);
// [ '1000', '2000' ]
// this is getData function4. 方法参数装饰器
参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，接收三个参数，第一个为类的构造函数或是原型对象，第二个为方法的名字，第三个为参数在函数参数列表中的索引。
代码语言：javascript复制function logParams(params:any){
return function(target:any,methodName:any,paramsIndex:any){
console.log(params);
// username
console.log(target);
// HttpClient { getData: [Function] }
console.log(methodName);
// getData
console.log(paramsIndex);
// 0
// 通过属性装饰器给当前类扩展属性
target.currentUser = params;
}
}
class HttpClient{
public url:string | undefined;
constructor(){}
getData(@logParams('username') username:any){
console.log(username);
// aiguangyuan
}
}
var http = new HttpClient();
http.getData('aiguangyuan');
console.log(http.currentUser);
// username
