快捷導(dǎo)航

淺談Typescript 裝飾器執(zhí)行順序

更新時間：2026年06月16日 09:37:39 作者：起這個名字

TypeScript中裝飾器的執(zhí)行順序遵循一套固定的規(guī)則,可以從同一聲明上的多個裝飾器和類中不同成員的裝飾器兩個維度來理解,下面就來詳細的介紹一下裝飾器執(zhí)行順序,感興趣的可以了解一下

1. 同一聲明上多個裝飾器的順序

當一個聲明（如類、方法、屬性）上應(yīng)用了多個裝飾器時：

裝飾器表達式(工廠函數(shù))的求值順序：從上到下。
裝飾器函數(shù)(返回的函數(shù)本身)的執(zhí)行順序：從下到上。

function first() {
  console.log('first(): 工廠求值');
  return function (target: any, propertyKey?: string, descriptor?: PropertyDescriptor) {
    console.log('first(): 裝飾器執(zhí)行');
  };
}

function second() {
  console.log('second(): 工廠求值');
  return function (target: any, propertyKey?: string, descriptor?: PropertyDescriptor) {
    console.log('second(): 裝飾器執(zhí)行');
  };
}

class Example {
  @first()
  @second()
  method() {}
}

輸出順序：

first(): 工廠求值
second(): 工廠求值
second(): 裝飾器執(zhí)行
first(): 裝飾器執(zhí)行

2. 類中不同成員裝飾器的整體順序

對于類中的不同成員（屬性、方法、參數(shù)等），裝飾器的執(zhí)行順序由成員類型和所屬（實例/靜態(tài)）決定，與源代碼書寫順序無關(guān)。

整體求值順序如下：

實例成員：先參數(shù)裝飾器，再方法/訪問器/屬性裝飾器。
對于每個實例成員，按照它們在類中出現(xiàn)的從上到下順序處理。
靜態(tài)成員：同樣先參數(shù)裝飾器，再方法/訪問器/屬性裝飾器。
對于每個靜態(tài)成員，按照它們在類中出現(xiàn)的從上到下順序處理。
構(gòu)造函數(shù)參數(shù)裝飾器。
類裝飾器（最后執(zhí)行）。

可以濃縮成一句話：實例 → 靜態(tài) → 構(gòu)造參數(shù) → 類，每一組內(nèi)部按成員的源代碼順序，且每個成員內(nèi)是參數(shù)裝飾器優(yōu)先于該成員的屬性/方法/訪問器裝飾器。

3. 示例演示

function classDecorator() {
  console.log('類裝飾器工廠');
  return function (constructor: Function) {
    console.log('類裝飾器執(zhí)行');
  };
}

function propertyDecorator(name: string) {
  console.log(`屬性裝飾器工廠: ${name}`);
  return function (target: any, propertyKey: string) {
    console.log(`屬性裝飾器執(zhí)行: ${name}`);
  };
}

function methodDecorator(name: string) {
  console.log(`方法裝飾器工廠: ${name}`);
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(`方法裝飾器執(zhí)行: ${name}`);
  };
}

function parameterDecorator(name: string) {
  console.log(`參數(shù)裝飾器工廠: ${name}`);
  return function (target: any, propertyKey: string, parameterIndex: number) {
    console.log(`參數(shù)裝飾器執(zhí)行: ${name}`);
  };
}

@classDecorator()
class Demo {
  @propertyDecorator('實例屬性')
  instanceProp: string;

  @propertyDecorator('靜態(tài)屬性')
  static staticProp: string;

  constructor(@parameterDecorator('構(gòu)造參數(shù)') param: string) {
    this.instanceProp = param;
  }

  @methodDecorator('實例方法')
  instanceMethod(@parameterDecorator('實例方法參數(shù)') arg: number) {}

  @methodDecorator('靜態(tài)方法')
  static staticMethod(@parameterDecorator('靜態(tài)方法參數(shù)') arg: number) {}
}

運行這段代碼，控制臺輸出順序如下：

屬性裝飾器工廠: 實例屬性
屬性裝飾器執(zhí)行: 實例屬性 // 實例屬性，無參數(shù)裝飾器
方法裝飾器工廠: 實例方法
參數(shù)裝飾器工廠: 實例方法參數(shù)
參數(shù)裝飾器執(zhí)行: 實例方法參數(shù) // 實例方法參數(shù)優(yōu)先
方法裝飾器執(zhí)行: 實例方法 // 實例方法在后

屬性裝飾器工廠: 靜態(tài)屬性
屬性裝飾器執(zhí)行: 靜態(tài)屬性 // 靜態(tài)屬性
方法裝飾器工廠: 靜態(tài)方法
參數(shù)裝飾器工廠: 靜態(tài)方法參數(shù)
參數(shù)裝飾器執(zhí)行: 靜態(tài)方法參數(shù) // 靜態(tài)方法參數(shù)優(yōu)先
方法裝飾器執(zhí)行: 靜態(tài)方法 // 靜態(tài)方法在后

參數(shù)裝飾器工廠: 構(gòu)造參數(shù)
參數(shù)裝飾器執(zhí)行: 構(gòu)造參數(shù) // 構(gòu)造函數(shù)參數(shù)

類裝飾器工廠
類裝飾器執(zhí)行 // 類裝飾器最后