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
🦢到家

總結

裝飾器的執行順序爲：屬性裝飾器 - 方法裝飾器（從後向前） - 類裝飾器（從後向前）