快捷導(dǎo)航

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

更新時(shí)間：2026年06月16日 09:37:39 作者：起這個(gè)名字

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

1. 同一聲明上多個(gè)裝飾器的順序

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

裝飾器表達(dá)式(工廠函數(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. 類中不同成員裝飾器的整體順序

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

整體求值順序如下：

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

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

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('實(shí)例屬性')
  instanceProp: string;

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

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

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

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

運(yùn)行這段代碼，控制臺(tái)輸出順序如下：

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

屬性裝飾器工廠: 靜態(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í)行 // 類裝飾器最后