ts中的修饰器

类修饰器

类修饰器在类声明前声明，紧靠着类声明。应用于类构造函数，用来监听、修改、替换类定义，传入一个参数，用来扩展类的属性、方法。

• 不传入参数

function logClass(params: any) {
  console.log(params) // 这个patams 就是当前的类
  params.prototype.url = '🦢到家'
  params.prototype.run = () => {
    console.log('客户第一')
  }
}

@logClass
class MyClass {
  constructor() {
  }
}

let myClass: any = new MyClass()
console.log(myClass.url)
myClass.run()

复制代码

执行结果：

class {constructor() {}}
🦢到家
客户第一

• 传入参数

function logClass(params:any) {
  return function (target: any) { // 返回的target就是调用本装饰器的类
    console.log(params)
    console.log(target)
    target.prototype.url = params
    target.prototype.run = function () {
      console.log('客户第一')
    }
  }
  
}

@logClass('🦢到家')
class MyClass {
  name: string
  constructor() {
  }
}

let myClass: any = new MyClass()
myClass.run()
复制代码

执行结果：

🦢到家
class {constructor() {}}
客户第一

类修饰器重载构造函数

类修饰器重载构造函数能够加强可扩展性，功能增长，不修改核心代码也能进行扩展。

function logClass(target:any){
    console.log(target); // 调用装饰器的类
    return class extends target{ // 返回一个target的继承，进行一个扩展
        url:any = '🦢到家'
        getData(){
            this.url = this.url + '客户服务第一';
            console.log(this.url)
        }
    }
}

@logClass
class MyClass{
    url:string | undefined
    constructor(){
        this.url = '58到家'
    }
    getData(){
        console.log(this.url)
    }
}

let myClass = new MyClass()
myClass.getData()
复制代码

执行结果为：

class {constructor() {this.url = "58\u5230\u5BB6";} getData() {console.log(this.url);}}
🦢到家客户服务第一

属性修饰器

属性修饰器在运行时被当作函数调用，传入两个参数:

• 一、对于静态成员是类的构造函数，对于实例成员是类的原型对象
• 二、成员的名字

function logProperty(params: any) {
  return function (target: any, attr: any) {
    console.log(target)
    console.log(attr)
    target[attr] = params
  }
} 

class MyClass1 {
  @logProperty('🦢到家')
  url: any | undefined
  constructor() {
  }
}
复制代码

运行结果为：

{constructor: ƒ}
🦢到家

方法修饰器

方法修饰器应用到方法的属性描述符上，能够用来监视、修改、替换方法定义。运行时传入三个参数：

• 一、对于静态成员是类的构造函数，对于实例成员是类的原型对象
• 二、成员的名字
• 三、成员的属性描述符

function logMethod(params: any) {
  return function (target: any, methodName: any, desc: any) {
    console.log(target)
    console.log(methodName)
    console.log(desc)

    target.newUrl = params
    target.run = () => {
      console.log('run')
    }
  }
} 

class MyClass {
  url: any | undefined
  constructor() {
  }

  @logMethod('daojia.com')
  getData() {
  }
}

let myClass: any = new MyClass()
console.log(myClass.newUrl)
复制代码

输出结果为：

{constructor: ƒ, getData: ƒ}
getData
{writable: true, enumerable: false, configurable: true, value: ƒ}
daojia.com

方法修饰器修改方法

function logMethod(params: any) {
  return function (target: any, methodName: any, desc: any) {
    console.log(target)
    console.log(methodName)
    console.log(desc)
    console.log(desc.value)

    let curMethod = desc.value
    desc.value = function (...args: any[]) {
      args = args.map((val) => {
        return String(val)
      })

      curMethod.call(target, ...args)
    }
  }
} 

class MyClass {
  constructor() {
  }

  @logMethod('daojia.com')
  getData(...args: any) {
    console.log(args)
  }
}

let myClass: any = new MyClass()
console.log(myClass.getData(1, 2))
复制代码

运行结果：

{constructor: ƒ, getData: ƒ}
getData
{writable: true, enumerable: false, configurable: true, value: ƒ}
getData(...args) {console.log(args);}
 ["1", "2"]

参数修饰器

参数修饰器会在运行时当作函数被调用，能够为类的原型增长一些元素数据，传入三个参数：

• 一、对于静态成员是类的构造函数，对于实例成员是类的原型对象
• 二、参数方法的名字
• 三、参数在函数参数列表中的索引

function logParams(params: any) {
  return function (target: any, methodName: any, paramsIndex: any) {
    console.log(target)
    console.log(methodName)
    console.log(paramsIndex)

    target[methodName](params)
  }
} 

class MyClass {
  constructor() {
  }

  getData(@logParams('🦢到家') params: any) {
    debugger
    console.log(params)
  }
}
复制代码

输出结果为：

{constructor: ƒ, getData: ƒ}
getData
0
🦢到家

总结

装饰器的执行顺序为：属性装饰器 - 方法装饰器（从后向前） - 类装饰器（从后向前）