JavaScript 装饰器（Decorators）底层：元编程对构造函数、原型与类成员属性的重写逻辑 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位编程爱好者，欢迎来到这场关于JavaScript装饰器底层机制的深入探讨。今天，我们将揭开装饰器那层看似魔法的面纱，直抵其核心——元编程如何精妙地重写和增强构造函数、原型以及类成员属性。这不是一个关于如何简单使用装饰器的教程，而是一场关于其工作原理、内部机制和JavaScript语言深层特性的探险。

装饰器的“魔法”与元编程的本质

JavaScript装饰器，从表面上看，是一种优雅的语法糖，它允许我们在不修改原有代码的情况下，为类、方法、访问器、属性等添加额外的行为或元数据。它们看起来像是魔法，一个简单的@符号就能改变一个实体。但正如所有的魔法一样，这背后都有着严谨的科学原理。在编程领域，这种原理就是“元编程”（Metaprogramming）。

元编程是指编写可以操作或生成其他程序的程序。在JavaScript的世界里，这意味着我们的代码能够检查、修改甚至创建运行时环境中的类、对象、函数等结构。装饰器正是JavaScript实现元编程的一种标准化、结构化的方式。它们本质上是高阶函数，在特定的时机被JavaScript运行时调用，接收被装饰的目标及其上下文信息，并有机会返回一个替换值或执行副作用，从而实现对目标行为的重写或增强。

理解装饰器的底层，就是理解JavaScript的运行时如何解析类定义，如何在内存中构建对象，以及装饰器函数是如何在这些关键节点上插入并执行其逻辑的。我们将深入探讨，当你在类定义上放置一个装饰器时，JavaScript引擎到底做了什么。

JavaScript元编程的基石

在深入装饰器之前，我们必须回顾JavaScript中支撑元编程的几个核心概念。

1. 对象、原型与继承

JavaScript是基于原型的语言。每个对象都有一个原型（[[Prototype]]），并通过原型链实现继承。类在ES6中引入，但它们本质上是构造函数的语法糖，并且仍然依赖于原型链。

构造函数（Constructor Function）: 当你定义一个类时，实际上是定义了一个函数，这个函数就是类的构造函数。

class MyClass {
  constructor() { console.log('MyClass instance created'); }
}
// 实际上，MyClass就是一个函数
console.log(typeof MyClass); // 'function'

原型对象（Prototype Object）: 类的所有实例方法和属性通常存储在构造函数的prototype属性指向的对象上。
```
class MyClass {
  myMethod() { console.log('Method called'); }
}
console.log(typeof MyClass.prototype.myMethod); // 'function'
```

属性描述符（Property Descriptors）: Object.defineProperty() 和 Object.getOwnPropertyDescriptor() 允许我们精确控制对象属性的特性，如value、writable、enumerable、configurable、get、set。这是装饰器重写方法和访问器的关键机制。

const obj = {};
Object.defineProperty(obj, 'myProp', {
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false
});
console.log(Object.getOwnPropertyDescriptor(obj, 'myProp'));
// { value: 123, writable: false, enumerable: true, configurable: false }

2. 函数作为一等公民

JavaScript中的函数是第一类公民，这意味着它们可以像任何其他值（如数字、字符串）一样被赋值给变量、作为参数传递给其他函数，或者从其他函数返回。这使得高阶函数和闭包成为可能，它们是装饰器实现行为封装和重写的核心。

function higherOrderFunction(fn) {
  return function(...args) {
    console.log('Before function call');
    const result = fn(...args);
    console.log('After function call');
    return result;
  };
}

function greet(name) {
  return `Hello, ${name}!`;
}

const decoratedGreet = higherOrderFunction(greet);
console.log(decoratedGreet('World'));

3. Proxy 与 Reflect (补充工具)

虽然装饰器本身并非Proxy，但Proxy和Reflect API提供了更底层的元编程能力，可以拦截几乎所有的对象操作。它们与装饰器在概念上是相通的，都是JavaScript元编程生态系统的一部分。装饰器可以看作是更高级、更结构化的元编程语法糖，它在类定义时静态地修改类结构，而Proxy则是在运行时动态地拦截对象操作。

JavaScript 装饰器的演进与标准

JavaScript装饰器提案经历了一个漫长的演进过程，从早期的Stage 0到目前的Stage 3，其设计和API都有显著的变化。本讲座将主要围绕目前ES提案的Stage 3版本进行讲解，这是最接近最终标准的版本，也是TypeScript等工具目前正在实现或已实现的版本。

Stage 3装饰器的一个核心变化是引入了更丰富的“上下文”对象（context），以及对不同成员类型（类、方法、访问器、字段）的更精细化处理。

装饰器种类与它们接收的参数

装饰器可以应用于以下几种目标：

类装饰器 (Class Decorator): 装饰整个类定义。
```
@classDecorator
class MyClass {}
```
方法装饰器 (Method Decorator): 装饰类的方法（包括静态方法和实例方法）。
```
class MyClass {
  @methodDecorator
  myMethod() {}
}
```
访问器装饰器 (Getter/Setter Decorator): 装饰类的get或set访问器。
```
class MyClass {
  @accessorDecorator
  get myProp() { return this._value; }
}
```
字段装饰器 (Field Decorator): 装饰类的公共或私有字段（属性）。这是Stage 3中变化最大的部分。
```
class MyClass {
  @fieldDecorator
  myField = 123;
}
```
自动访问器装饰器 (Auto-Accessor Decorator): 装饰使用accessor关键字声明的字段。
```
class MyClass {
  @accessorDecorator
  accessor myAutoAccessor = 123;
}
```

每种装饰器在被调用时，都会接收到两个核心参数：

value: 被装饰的实体本身。它的类型取决于被装饰的目标。
context: 一个包含元数据和辅助功能的上下文对象。

下表总结了不同装饰器接收的value类型和context对象的关键属性：

装饰器类型	`value` 类型	`context.kind` 值	`context` 关键属性
类装饰器	构造函数 (`function`)	`'class'`	`name`
方法装饰器	方法函数 (`function`)	`'method'`	`name`, `static`, `private`, `addInitializer`
Getter 装饰器	Getter 函数 (`function`)	`'getter'`	`name`, `static`, `private`, `addInitializer`
Setter 装饰器	Setter 函数 (`function`)	`'setter'`	`name`, `static`, `private`, `addInitializer`
字段装饰器	`undefined` (或初始值)	`'field'`	`name`, `static`, `private`, `access`, `addInitializer`
自动访问器装饰器	一个包含 `get`, `set`, `init` 方法的对象	`'accessor'`	`name`, `static`, `private`, `access`, `addInitializer`

context对象是理解Stage 3装饰器威力的关键。它不仅提供了关于被装饰目标的元数据（kind, name, static, private），还提供了重要的辅助函数，如addInitializer和access。

context.addInitializer(callback): 这是最重要的方法之一。它允许装饰器注册一个回调函数，这个回调函数将在类定义被完全处理后（对于静态成员）或在每次创建实例时（对于实例成员）执行。这对于那些需要在运行时修改实例或访问this的字段装饰器尤为关键。
context.access: 对于私有成员或自动访问器，access对象提供了get和set方法，允许装饰器在不直接暴露私有实现的情况下与这些成员交互。

装饰器应用过程与重写逻辑详解

装饰器的执行顺序是从内到外，从下到上。当JavaScript引擎遇到一个带有装饰器的类定义时，它会按照以下步骤处理：

解析类定义：首先解析类的主体，识别所有成员（方法、字段、访问器等）。
收集成员装饰器：从最内部的成员（如字段、方法）开始，自下而上地收集所有装饰器。
执行成员装饰器：按照收集到的顺序执行这些装饰器。每个装饰器接收value和context，并有机会返回一个新的value来替换原始成员。
处理addInitializer注册的回调：如果成员装饰器通过context.addInitializer注册了回调，这些回调会被收集起来。
执行类装饰器：最后执行类装饰器，它接收整个类构造函数作为value。
整合所有修改：JavaScript引擎将所有装饰器返回的新值和注册的初始化器整合到最终的类定义中。

现在，我们逐一深入探讨不同类型的装饰器是如何实现重写逻辑的。

1. 类装饰器 (Class Decorator)

类装饰器是作用于整个类定义的。它接收类构造函数本身作为value参数。它的重写能力体现在它可以返回一个新的构造函数来替换原来的类。

底层逻辑: 当一个类被装饰时，装饰器函数被调用，并传入该类的构造函数。如果装饰器返回了一个新的构造函数，那么这个新的构造函数将成为该类的实际定义。这意味着你可以完全替换整个类，或者返回一个继承自原类的子类，从而在不改变原类定义的前提下添加或修改行为。

示例：添加静态属性和方法

/**
 * @param {Function} value - 被装饰的类构造函数
 * @param {object} context - 上下文对象
 */
function addFeature(value, context) {
  if (context.kind !== 'class') {
    throw new Error('addFeature can only decorate classes');
  }

  // 返回一个新的类，继承自原类
  return class extends value {
    static addedStaticProperty = 'This is a static property';
    static addedStaticMethod() {
      console.log('This is a static method added by decorator.');
    }

    constructor(...args) {
      super(...args);
      this.addedInstanceProperty = 'This is an instance property';
      console.log('Instance created with added properties.');
    }

    addedInstanceMethod() {
      console.log('This is an instance method added by decorator.');
    }
  };
}

@addFeature
class MyService {
  constructor(name) {
    this.name = name;
    console.log(`MyService instance '${name}' created.`);
  }

  originalMethod() {
    console.log(`Original method called by ${this.name}.`);
  }
}

console.log(MyService.addedStaticProperty); // This is a static property
MyService.addedStaticMethod(); // This is a static method added by decorator.

const service = new MyService('Test');
console.log(service.name); // Test
console.log(service.addedInstanceProperty); // This is an instance property
service.originalMethod(); // Original method called by Test.
service.addedInstanceMethod(); // This is an instance method added by decorator.

// 验证原类是否被替换
console.log(MyService.prototype.hasOwnProperty('originalMethod')); // true
console.log(Object.getPrototypeOf(MyService).name); // 'value' (指被继承的匿名类)

在这个例子中，addFeature装饰器返回了一个匿名类，它继承了MyService。这个匿名类添加了新的静态和实例成员。当@addFeature class MyService {}被处理时，MyService这个变量实际上被重新赋值为addFeature返回的新构造函数。

2. 方法装饰器 (Method Decorator)

方法装饰器作用于类的方法上，无论是实例方法还是静态方法。它接收方法函数本身作为value。

底层逻辑: 方法装饰器最常见的用途是修改方法的行为，例如日志记录、性能测量、防抖、节流、权限检查等。装饰器函数接收原始的方法作为value，并可以返回一个新的函数来替换它。这个新的函数通常会“包装”原始方法，在调用原始方法之前或之后执行额外的逻辑。对于实例方法，这意味着修改了MyClass.prototype上的属性；对于静态方法，则修改了MyClass构造函数上的属性。

示例：日志记录方法

/**
 * @param {Function} value - 被装饰的方法函数
 * @param {object} context - 上下文对象
 */
function logMethod(value, context) {
  if (context.kind !== 'method') {
    throw new Error('logMethod can only decorate methods');
  }

  const methodName = String(context.name);

  // 返回一个新的方法函数来替换原始方法
  return function(...args) {
    console.log(`[${context.static ? 'Static ' : ''}Method Entry] ${methodName} called with args:`, args);
    try {
      const result = value.apply(this, args); // 调用原始方法
      console.log(`[${context.static ? 'Static ' : ''}Method Exit] ${methodName} returned:`, result);
      return result;
    } catch (error) {
      console.error(`[${context.static ? 'Static ' : ''}Method Error] ${methodName} threw:`, error);
      throw error;
    }
  };
}

class Calculator {
  @logMethod
  add(a, b) {
    return a + b;
  }

  @logMethod
  static multiply(a, b) {
    return a * b;
  }

  @logMethod
  divide(a, b) {
    if (b === 0) {
      throw new Error('Cannot divide by zero');
    }
    return a / b;
  }
}

const calc = new Calculator();
console.log('Result:', calc.add(5, 3));
console.log('---');
console.log('Result:', Calculator.multiply(4, 2));
console.log('---');
try {
  calc.divide(10, 0);
} catch (e) {
  console.log('Caught expected error:', e.message);
}

这里，logMethod装饰器返回了一个新的函数。当calc.add(5, 3)被调用时，实际执行的是logMethod返回的那个包装函数，它在调用原始add方法前后打印日志。对于静态方法multiply也是同理。

3. Getter/Setter 装饰器 (Accessor Decorator)

Getter和Setter装饰器分别作用于类属性的get和set访问器。它们接收对应的访问器函数作为value。

底层逻辑: Getter/Setter装饰器的核心在于修改属性的访问行为。与方法装饰器类似，它们可以返回一个新的get或set函数来替换原始的访问器。这允许在属性读取或写入时插入逻辑，例如验证、转换或触发副作用。这些修改是通过Object.defineProperty在类构建时完成的。

示例：缓存 Getter 结果

/**
 * @param {Function} value - 被装饰的 getter 函数
 * @param {object} context - 上下文对象
 */
function cachedGetter(value, context) {
  if (context.kind !== 'getter') {
    throw new Error('cachedGetter can only decorate getters');
  }

  const cacheKey = Symbol(`__${String(context.name)}_cache__`);

  // 返回一个新的 getter 函数
  return function() {
    if (!this.hasOwnProperty(cacheKey)) {
      console.log(`Calculating ${String(context.name)}...`);
      this[cacheKey] = value.call(this); // 调用原始 getter 并缓存结果
    } else {
      console.log(`Using cached value for ${String(context.name)}.`);
    }
    return this[cacheKey];
  };
}

class UserProfile {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  @cachedGetter
  get fullName() {
    // 模拟一个昂贵的计算
    for (let i = 0; i < 1000000; i++) {}
    return `${this.firstName} ${this.lastName}`;
  }
}

const user = new UserProfile('John', 'Doe');

console.time('First access');
console.log(user.fullName); // Calculating fullName... John Doe
console.timeEnd('First access');

console.time('Second access');
console.log(user.fullName); // Using cached value for fullName. John Doe
console.timeEnd('Second access');

console.time('Third access');
console.log(user.fullName); // Using cached value for fullName. John Doe
console.timeEnd('Third access');

这里，cachedGetter返回了一个新的get函数。这个函数会检查实例上是否存在一个内部的缓存属性。如果不存在，则调用原始的get函数计算结果并缓存；如果存在，则直接返回缓存值。

4. 字段装饰器 (Field Decorator)

字段装饰器是Stage 3提案中变化最大的部分，也是理解其底层机制最复杂的地方。它不像方法或访问器那样直接接收一个函数。

底层逻辑:

装饰器调用时机: 字段装饰器在类定义阶段被调用，此时实例尚未创建。这意味着它不能直接访问this（实例）。
value参数: 字段装饰器接收的value参数通常是undefined（对于未初始化字段）或字段的初始值（对于已初始化字段）。但更重要的是，它并不直接替换这个值。
context.addInitializer: 这是字段装饰器的核心机制。装饰器通过context.addInitializer注册一个回调函数。这个回调函数在每次 实例创建时 都会被调用，并且可以访问到实例this。
重写方式: 字段装饰器通常通过addInitializer回调，在实例上使用Object.defineProperty来定义或重新定义字段。这允许装饰器将一个简单的字段转换为一个具有自定义get/set逻辑的属性，或者在字段初始化时执行额外的操作。
context.access: 对于私有字段或需要与字段值交互的场景，context.access对象提供了get和set方法，允许装饰器在不直接暴露私有字段标识符的情况下读取和写入其值。

示例：绑定方法到实例 (@bound)

这是一个经典的用例，将类方法自动绑定到其实例，避免this丢失问题。

/**
 * @param {Function} value - 被装饰的方法函数 (作为字段)
 * @param {object} context - 上下文对象
 */
function bound(value, context) {
  if (context.kind !== 'method') { // 注意：这里我们装饰的是一个方法，但它被视为一个字段
    throw new Error('bound can only decorate methods');
  }

  // 确保它不是静态方法
  if (context.static) {
    throw new Error('bound cannot decorate static methods');
  }

  // 使用 addInitializer 注册一个在实例创建时执行的回调
  context.addInitializer(function() {
    // 在实例的构造函数执行后，将方法绑定到当前实例
    // this 此时就是实例本身
    this[context.name] = this[context.name].bind(this);
  });
}

class Greeter {
  message = 'Hello';

  constructor(name) {
    this.name = name;
  }

  @bound
  sayHello() {
    console.log(`${this.message}, ${this.name}!`);
  }
}

const greeter = new Greeter('Alice');
const { sayHello } = greeter; // 提取方法，此时 this 会丢失

// 如果没有 @bound 装饰器，sayHello 会输出 'Hello, undefined!' 或报错
sayHello(); // 输出: Hello, Alice!

// 验证绑定是否生效
setTimeout(greeter.sayHello, 100); // 输出: Hello, Alice!

在这个@bound例子中，装饰器没有返回任何东西来替换sayHello方法。相反，它通过context.addInitializer注册了一个函数。这个函数会在Greeter实例创建后立即执行，并将greeter.sayHello方法重新赋值为它自身绑定到this（即greeter实例）的版本。

示例：验证字段 (@validate)

/**
 * @param {Function} validatorFn - 验证函数
 * @returns {Function} 字段装饰器
 */
function validate(validatorFn) {
  return function(value, context) {
    if (context.kind !== 'field') {
      throw new Error('validate can only decorate fields');
    }

    // 使用 addInitializer 在实例创建时设置验证逻辑
    context.addInitializer(function() {
      // 在实例上定义一个 getter/setter 来拦截属性访问
      Object.defineProperty(this, context.name, {
        configurable: true,
        enumerable: true,
        get() {
          return this[`_${String(context.name)}`]; // 返回内部存储的值
        },
        set(newValue) {
          if (!validatorFn(newValue)) {
            throw new Error(`Validation failed for ${String(context.name)}: ${newValue}`);
          }
          this[`_${String(context.name)}`] = newValue; // 存储有效值
        }
      });
      // 如果字段有初始值，需要在这里触发一次 set 校验
      if (value !== undefined) {
        this[context.name] = value;
      }
    });
  };
}

class User {
  @validate(val => typeof val === 'string' && val.length > 0)
  name = '';

  @validate(val => typeof val === 'number' && val >= 0 && val <= 150)
  age = 0;

  constructor(name, age) {
    this.name = name; // 触发 set 验证
    this.age = age;   // 触发 set 验证
  }
}

const user1 = new User('Alice', 30);
console.log(user1.name, user1.age); // Alice 30

try {
  const user2 = new User('', 25); // 初始值验证失败
} catch (e) {
  console.log(e.message); // Validation failed for name:
}

try {
  user1.age = 200; // 后续赋值验证失败
} catch (e) {
  console.log(e.message); // Validation failed for age: 200
}

这个@validate装饰器工厂返回的装饰器，通过addInitializer在实例上重新定义了字段，将其转换为一个带有get/set访问器的属性。set访问器会在赋值前运行验证函数。

5. 自动访问器装饰器 (Auto-Accessor Decorator)

这是Stage 3中一个非常强大的新特性，通过accessor关键字，我们可以声明一个自动创建get和set的字段。装饰器可以直接作用于这个自动访问器。

底层逻辑: 自动访问器装饰器接收一个特殊的对象作为value，这个对象包含三个方法：get、set和init。

get(): 获取底层字段的值。
set(newValue): 设置底层字段的值。
init(initialValue): 在实例创建时，用于初始化底层字段的值。
装饰器需要返回一个新的对象，也包含get、set和init方法，来替换原始的自动访问器逻辑。这使得装饰器能够更直接、更简洁地包装属性的存取逻辑。

示例：可观察属性 (@observable)

/**
 * @param {object} value - 原始的 accessor 对象 { get, set, init }
 * @param {object} context - 上下文对象
 */
function observable(value, context) {
  if (context.kind !== 'accessor') {
    throw new Error('observable can only decorate accessors');
  }

  const propName = String(context.name);
  const { get, set, init } = value; // 解构原始的 get, set, init 方法

  // 返回一个新的 accessor 对象，重写其 get/set 行为
  return {
    get() {
      console.log(`[Observable] Getting ${propName}:`, get.call(this));
      return get.call(this); // 调用原始的 getter
    },
    set(newValue) {
      console.log(`[Observable] Setting ${propName} from ${get.call(this)} to ${newValue}`);
      set.call(this, newValue); // 调用原始的 setter
      // 可以在这里触发事件通知观察者
    },
    init(initialValue) {
      console.log(`[Observable] Initializing ${propName} with:`, initialValue);
      return init.call(this, initialValue); // 调用原始的 initializer
    }
  };
}

class StateManager {
  @observable
  accessor count = 0; // 使用 accessor 关键字

  @observable
  accessor message = 'Initial message';

  constructor(initialCount, initialMessage) {
    this.count = initialCount;
    this.message = initialMessage;
  }
}

const sm = new StateManager(10, 'Hello World');
console.log('---');
sm.count++; // [Observable] Setting count from 10 to 11
console.log(sm.count); // [Observable] Getting count: 11 -> 11
console.log('---');
sm.message = 'Updated message'; // [Observable] Setting message from Initial message to Updated message
console.log(sm.message); // [Observable] Getting message: Updated message -> Updated message

在这个例子中，observable装饰器通过返回一个新的{ get, set, init }对象，直接替换了count和message自动访问器的底层行为。每次读取或写入属性时，都会先执行装饰器中定义的日志逻辑。

6. 私有成员装饰器 (`#`)

Stage 3 装饰器对私有成员 (#fieldName) 也提供了支持。装饰器不能直接访问私有字段的值，但context.access对象提供了get和set方法，允许装饰器以受控的方式与私有成员交互。

底层逻辑: 当装饰器作用于私有成员时，context.private属性为true。context.access对象包含get和set方法，它们是用于从当前实例读取和写入私有字段的函数。这些方法确保了对私有字段的访问仍然通过其私有机制进行，而不是通过公共接口。

示例：私有字段日志 (@privateLogger)

/**
 * @param {any} value - 原始值 (对于字段可能是 undefined 或初始值，对于方法是函数)
 * @param {object} context - 上下文对象
 */
function privateLogger(value, context) {
  if (!context.private) {
    throw new Error('privateLogger can only decorate private members');
  }

  const memberName = String(context.name);
  const { get, set } = context.access; // 获取访问私有成员的 get/set 方法

  if (context.kind === 'field' || context.kind === 'accessor') {
    context.addInitializer(function() {
      // 对于字段/访问器，在实例上重新定义一个具有日志功能的访问器
      Object.defineProperty(this, memberName, {
        configurable: true,
        enumerable: false, // 私有成员通常不可枚举
        get() {
          console.log(`[Private Log] Getting private field ${memberName}`);
          return get.call(this); // 使用 context.access.get 读取私有值
        },
        set(newValue) {
          console.log(`[Private Log] Setting private field ${memberName} to`, newValue);
          set.call(this, newValue); // 使用 context.access.set 写入私有值
        }
      });
      // 如果是字段且有初始值，需要触发一次 set 确保日志记录
      if (value !== undefined) {
        this[memberName] = value;
      }
    });
  } else if (context.kind === 'method') {
    // 对于私有方法，返回一个包装后的方法
    return function(...args) {
      console.log(`[Private Log] Calling private method ${memberName} with args:`, args);
      return value.apply(this, args);
    };
  }
}

class SecretAgent {
  @privateLogger
  #secretCode = '007';

  @privateLogger
  #logMission(mission) {
    console.log(`Mission: ${mission}`);
  }

  get agentSecretCode() {
    return this.#secretCode; // 触发私有字段的 get 访问器
  }

  set agentSecretCode(newCode) {
    this.#secretCode = newCode; // 触发私有字段的 set 访问器
  }

  reportMission(mission) {
    this.#logMission(mission); // 触发私有方法的调用
  }
}

const bond = new SecretAgent();
console.log(bond.agentSecretCode); // [Private Log] Getting private field #secretCode -> 007
bond.agentSecretCode = '008'; // [Private Log] Setting private field #secretCode to 008
bond.reportMission('Infiltrate enemy base'); // [Private Log] Calling private method #logMission with args: ["Infiltrate enemy base"] -> Mission: Infiltrate enemy base

这个例子展示了如何通过context.access.get和context.access.set来与私有字段交互，以及如何包装私有方法。

装饰器组合与执行顺序

当一个目标有多个装饰器时，它们的执行顺序是固定的：从内到外，从下到上。

@decoratorA
@decoratorB
class MyClass {
  @decoratorC
  @decoratorD
  myMethod() {}
}

执行顺序如下：

decoratorD (应用于myMethod)
decoratorC (应用于myMethod，接收decoratorD可能返回的新方法)
decoratorB (应用于MyClass)
decoratorA (应用于MyClass，接收decoratorB可能返回的新类)

这种“管道式”的执行方式允许装饰器层层递进地修改或增强目标，每个装饰器都接收前一个装饰器处理后的结果。

总结：受控的元编程力量

JavaScript装饰器提供了一种结构化、声明式的方式来进行元编程。它们在类定义阶段，通过拦截构造函数、原型和类成员的创建过程，利用JavaScript的底层机制（如Object.defineProperty、函数包装、高阶函数和addInitializer回调），实现了对这些实体的重写和增强。

理解装饰器的底层，就是理解JavaScript语言的深度和灵活性。它们并非简单的语法糖，而是精心设计的API，让开发者能够以一种清晰、可维护的方式，在不直接修改核心业务逻辑的情况下，实现横切关注点、行为扩展和元数据注入。通过装饰器，我们能够编写更模块化、更具表现力的代码，将模式和约定提升到语言层面，从而在复杂应用中实现更高的代码质量和开发效率。