TS装饰器
装饰器:装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。
通俗的讲装饰器就是一一个方法， 可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
常见的装饰器有:类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器的写法:普通装饰器(无法传参)、装饰器工厂 (可传参)
装饰器是过去几年中js最大的成就之，已是Es7的标准特性之一
1.1 类装饰器
类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
- 1.1.1 普通装饰器
/**
* TS装饰器
* 普通类装饰器（无法传参）
* 类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
*/
//声明一个装饰器
function logClass(params:any) {
// console.log(params)
// 这里的params 就是当前类 HttpClient
//这个时候我们就可以在修饰器中扩展当前类的属性和方法
//扩展类
params.prototype.apiUrl = 'xxxx';
//扩展方法
params.prototype.run = function():void{
console.log("我是run方法");
}
}
// 调用普通装饰器
@logClass
//声明一个类
class HttpClient {
constructor() {
}
getData() {
}
}
var p:any = new HttpClient();
console.log(p.apiUrl);
//xxxx
p.run();
- 1.1.2 装饰器工厂
/**
* TS装饰器
* 装饰器工厂（可传参）
* 类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
*/
//声明一个装饰器
// 这里的参数params 是装饰器传入的参数
function logClass(params:string) {
//这里的target是当前类
return function(target:any){
// console.log(target);
// console.log(params);
target.prototype.apiUrl = params;
}
}
// 调用普通装饰器
@logClass('http://www.baidu.com')
//声明一个类
class HttpClient {
constructor() {
}
getData() {
}
}
var http:any = new HttpClient();
console.log(http.apiUrl)
- 1.1.3 下面是一个重载构造函数的例子
/**
* 下面是一个重载构造函数的例子 。
* 类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。
* 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。
*/
function logClass(target:any){
return class extends target {
apiUrl:string = '我是修改后的数据';
getData(){
console.log(this.apiUrl)
}
}
}
@logClass
class overLoad{
public apiUrl:string | undefined;
constructor(){
this.apiUrl = '我是构造函数里面的apiurl'
}
getData(){
console.log(this.apiUrl)
}
}
var o = new overLoad();
o.getData();
// 我是构造函数里面的apiurl
// 使用装饰器重载之后
// 我是修改后的数据
2.1 属性装饰器
属性装饰器
属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数:
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。
/**
* 2、属性装饰器
* 属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数:
* 1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
* 2、成员的名字。
*/
//定义属性装饰器
function logProperty(params:any){
return function(target:any,attr:any){
target[attr] = params;
}
}
class Person {
@logProperty('康家豪')
name:string | undefined;
constructor(){
}
getData(){
console.log(this.name)
}
}
var p = new Person();
p.getData();
3.1 方法装饰器
方法装饰器
它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。
方法装饰会在运行时传入下列3个参数:
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。
3、成员的属性插述符。
/**
* 3、方法装饰器
* 它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。
* 方法装饰会在运行时传入下列3个参数:
* 1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
* 2、成员的名字。
* 3、成员的属性插述符。
*/
// 方法装饰器 一
function logMethods(params:any){
return function(target:any,methodsName:any,desc:any){
console.log(target)
//{getData: ƒ, constructor: ƒ}
console.log(methodsName)
//getData
console.log(desc)
//{writable: true, enumerable: true, configurable: true, value: ƒ}
//扩展属性
target.apiUrl = 'xxx';
target.run = function():void{
console.log('run')
}
}
}
class Person {
name:string | undefined;
constructor(){
}
@logMethods('http://www.baidu.com')
getData(){
console.log(this.name)
}
}
var p:any = new Person();
console.log(p.run());
//方法装饰器 二 修改方法
function logMethods(params:any){
return function(target:any,methodsName:any,desc:any){
console.log(target)
//{getData: ƒ, constructor: ƒ}
console.log(methodsName)
//getData
console.log(desc)
//{writable: true, enumerable: true, configurable: true, value: ƒ}
console.log(desc.value)
//修改装饰器的方法：把装饰器方法传入的所有参数修改为string类型
//1.保存当前的方法
var oMethod = desc.value;
//方法被替换了
// desc.value = function(...args:any[]){
// args = args.map((item) => {
// return String(item)
// })
// console.log(args)
// }
//怎么修改当前方法呢？
desc.value = function(...args:any[]){
args = args.map((item) => {
return String(item)
})
console.log(args)
oMethod.apply(this.args);
}
}
}
class Person {
name:string | undefined;
constructor(){
}
@logMethods('http://www.baidu.com')
getData(...args:any[]){
console.log('我是原本的返回值')
}
}
var p = new Person();
p.getData(123,123,123,123,1231);
4.1 各种装饰器的执行顺序
/**
* 装饰器执行顺序
* 结果：属性装饰器 >> 方法装饰器 >> 类装饰器
* 同样的装饰器会先执行后面的装饰器
*/
function logClass(params:string){
return function(target:any){
console.log('类装饰器')
}
}
function logAttr(params?:string){
return function(target:any,attrName:any){
console.log('属性装饰器')
}
}
function logMethods(params:any){
return function(target:any,methodsName:any,desc:any){
console.log('方法装饰器')
}
}
@logClass('类装饰器')
class Person {
@logAttr('属性装饰器')
name:string | undefined;
constructor(){
}
@logMethods('方法装饰器')
getData(){
console.log('我是原本的返回值')
}
}