JavaScript内核与高级编程之：`JavaScript` 的 `Decorator` 提案：从实验性到标准化的底层实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位听众，早上好！今天咱们聊聊 JavaScript 装饰器（Decorators）这个话题，一个从实验性走向标准化的“老朋友”。它就像 JavaScript 世界里的“变形金刚”，能给你的类和方法“穿”上各种各样的“装备”，让它们的功能更加强大，代码更加优雅。别担心，我会用最通俗易懂的方式，带大家深入了解它的底层实现和应用。

第一部分：什么是装饰器？别怕，它没那么高冷！

首先，我们来明确一下什么是装饰器。装饰器本质上就是一个函数，它可以接收另一个函数、类或者属性作为参数，然后对它们进行修改或者增强，最后返回修改后的结果。听起来有点抽象？没关系，咱们举个例子。

假设你有一个 Person 类：

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person("Alice");
person.sayHello(); // 输出: Hello, my name is Alice

现在，你想在 sayHello 方法执行前后，分别打印一些日志。如果没有装饰器，你可能会这样做：

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

  sayHello() {
    console.log("Before sayHello"); // 添加日志
    console.log(`Hello, my name is ${this.name}`);
    console.log("After sayHello"); // 添加日志
  }
}

const person = new Person("Alice");
person.sayHello();
// 输出:
// Before sayHello
// Hello, my name is Alice
// After sayHello

这样做当然可以，但是如果有很多方法都需要添加日志，代码就会变得非常冗余。这时候，装饰器就派上用场了！

我们可以创建一个装饰器函数 logDecorator：

function logDecorator(target, name, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Before executing ${name}`);
    const result = originalMethod.apply(this, args);
    console.log(`After executing ${name}`);
    return result;
  };

  return descriptor;
}

然后，我们使用 @ 符号将这个装饰器应用到 sayHello 方法上：

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

  @logDecorator
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person("Alice");
person.sayHello();
// 输出:
// Before executing sayHello
// Hello, my name is Alice
// After executing sayHello

看到了吗？我们只用了一行代码 @logDecorator，就为 sayHello 方法添加了日志功能。这就是装饰器的魅力！

第二部分：装饰器的类型：五花八门，总有一款适合你！

装饰器可以应用于不同的目标：

类装饰器 (Class Decorator): 作用于整个类，可以修改类的构造函数、添加静态属性和方法等。
方法装饰器 (Method Decorator): 作用于类的方法，可以修改方法的行为，例如添加日志、验证权限等。
属性装饰器 (Property Decorator): 作用于类的属性，可以控制属性的访问和修改。
参数装饰器 (Parameter Decorator): 作用于方法的参数，可以记录参数信息、验证参数类型等。
访问器装饰器 (Accessor Decorator): 作用于类属性的getter/setter，可以控制属性的访问和修改，类似于属性装饰器，但更细粒度。

咱们分别来看一下这些装饰器的例子：

1. 类装饰器:

function sealed(constructor) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

// 尝试修改 Greeter 类会报错 (在严格模式下)
// Greeter.prototype.newMethod = function() {}; // 这行代码会导致错误

这个 sealed 装饰器会冻结类及其原型，防止被修改。

2. 方法装饰器:

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

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

  @readonly
  getName() {
    return this.name;
  }
}

const person = new Person("Bob");
// person.getName = function() { return "Changed"; }; // 尝试修改 getName 会报错 (在严格模式下)
console.log(person.getName()); // 输出: Bob

readonly 装饰器使 getName 方法只读，无法被修改。

3. 属性装饰器:

function logProperty(target, name) {
  let _val = this[name];

  const getter = function() {
      console.log(`Get: ${name} => ${_val}`);
      return _val;
  };

  const setter = function(newVal) {
      console.log(`Set: ${name} => ${newVal}`);
      _val = newVal;
  };

  Object.defineProperty(target, name, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true
  });
}

class Example {
  @logProperty
  name: string;

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

let ex = new Example("Initial Name");
console.log(ex.name);
ex.name = "New Name";
console.log(ex.name);

// 输出:
// Set: name => Initial Name
// Get: name => Initial Name
// Initial Name
// Set: name => New Name
// Get: name => New Name
// New Name

logProperty 装饰器会在属性的 getter 和 setter 中添加日志。

4. 参数装饰器:

function logParameter(target, method, index) {
  const metadataKey = `log_${method}_parameters`;
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Order {
  processOrder(@logParameter quantity: number, item: string) {
    console.log(`Processing order: ${quantity} ${item}`);
  }
}

const order = new Order();
order.processOrder(10, "Widget");

// 这里只是演示了如何记录参数信息，并没有实际使用这些信息。
// 在实际应用中，你可以根据记录的参数信息进行验证、转换等操作。

logParameter 装饰器记录了被装饰的参数的索引。

5. 访问器装饰器:

function enumerable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.enumerable = value;
  };
}

class Point {
  private _x: number;
  private _y: number;

  constructor(x: number, y: number) {
    this._x = x;
    this._y = y;
  }

  @enumerable(false)
  get x(): number { return this._x; }

  @enumerable(false)
  get y(): number { return this._y; }
}

const point = new Point(1, 2);
for (let key in point) {
  console.log(key); // 不会输出 x 和 y，因为 enumerable 设置为 false
}

enumerable 装饰器控制了属性是否可枚举。

第三部分：装饰器的底层实现：揭秘“变形金刚”的内部构造！

现在，我们来深入了解一下装饰器的底层实现。其实，装饰器的本质就是一个函数，它接收目标对象（类、方法、属性等）和一些元数据作为参数，然后对目标对象进行修改或者增强，最后返回修改后的结果。

以方法装饰器为例，它的函数签名通常是这样的：

function decorator(target, name, descriptor) {
  // target: 目标类的原型对象
  // name: 目标方法的名称
  // descriptor: 目标方法的属性描述符
}

target: 指向被装饰类的原型对象。例如，如果装饰器应用在 Person 类的 sayHello 方法上，那么 target 就指向 Person.prototype。
name: 被装饰的方法的名称，字符串类型。在本例中，name 的值就是 "sayHello"。
descriptor: 一个对象，包含了关于被装饰方法的属性描述信息。它通常包含以下属性：
- value: 方法的函数体。
- writable: 一个布尔值，表示方法是否可写。
- enumerable: 一个布尔值，表示方法是否可枚举。
- configurable: 一个布尔值，表示方法是否可配置。

装饰器的主要任务就是修改 descriptor 对象，从而改变方法的行为。例如，在上面的 logDecorator 例子中，我们修改了 descriptor.value，将其指向一个新的函数，这个新函数在执行原始方法前后添加了日志。

底层实现的关键步骤：

获取目标对象和元数据： 装饰器函数接收 target、name 和 descriptor 等参数，这些参数提供了关于被装饰对象的信息。
修改或增强目标对象： 装饰器函数可以修改 descriptor 对象的属性，例如 value、writable、enumerable 和 configurable，从而改变方法的行为。
返回修改后的结果： 装饰器函数通常会返回修改后的 descriptor 对象，以便 JavaScript 引擎将其应用到目标对象上。

一个更加详细的例子：实现一个简单的缓存装饰器

function cacheDecorator(target, name, descriptor) {
  const originalMethod = descriptor.value;
  const cache = new Map();

  descriptor.value = function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log(`Fetching result from cache for ${name}(${key})`);
      return cache.get(key);
    }

    console.log(`Executing ${name}(${key}) and caching the result`);
    const result = originalMethod.apply(this, args);
    cache.set(key, result);
    return result;
  };

  return descriptor;
}

class MathOperations {
  @cacheDecorator
  add(a, b) {
    console.log("Performing actual addition");
    return a + b;
  }
}

const math = new MathOperations();
console.log(math.add(2, 3)); // 第一次调用，执行实际加法
console.log(math.add(2, 3)); // 第二次调用，从缓存中获取结果
console.log(math.add(4, 5)); // 第一次调用，执行实际加法
console.log(math.add(4, 5)); // 第二次调用，从缓存中获取结果

// 输出:
// Executing add([2,3]) and caching the result
// Performing actual addition
// 5
// Fetching result from cache for add([2,3])
// 5
// Executing add([4,5]) and caching the result
// Performing actual addition
// 9
// Fetching result from cache for add([4,5])
// 9

这个 cacheDecorator 装饰器会将方法的执行结果缓存起来，下次使用相同的参数调用该方法时，直接从缓存中获取结果，避免重复计算。

第四部分：从实验性到标准化：装饰器的发展历程

JavaScript 装饰器提案经历了漫长的发展历程，从最初的实验性特性到现在的标准化，可谓是“十年磨一剑”。

早期：实验性特性 在很长一段时间里，装饰器只是一个实验性特性，需要在 Babel 等工具的支持下才能使用。
中期：多次修改和调整 装饰器提案经历了多次修改和调整，包括语法、语义和 API 等方面。
现在：标准化 最终，装饰器提案进入了 TC39 标准化流程，并有望在未来的 ECMAScript 版本中正式发布。

不同阶段的装饰器语法：

| 阶段 | 语法 | 说明 |

第五部分：装饰器的应用场景：让你的代码更上一层楼！

装饰器在实际开发中有很多应用场景，例如：

日志记录： 在方法执行前后添加日志，方便调试和监控。
权限验证： 验证用户是否有权访问某个方法。
缓存： 缓存方法的执行结果，提高性能。
重试： 在方法执行失败时自动重试。
数据验证： 验证方法的输入参数是否符合要求。
依赖注入： 将依赖注入到类中。
AOP（面向切面编程）： 将横切关注点（例如日志、权限验证等）从业务逻辑中分离出来。

一些实际的代码示例：

1. 权限验证装饰器：

function authorize(role) {
  return function(target, name, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args) {
      const userRole = this.role; // 假设类有一个 role 属性

      if (userRole === role) {
        return originalMethod.apply(this, args);
      } else {
        console.log(`User does not have permission to access ${name}`);
        return null; // 或者抛出一个错误
      }
    };

    return descriptor;
  };
}

class AdminPanel {
  constructor(role) {
    this.role = role;
  }

  @authorize("admin")
  deleteUser(userId) {
    console.log(`User ${userId} deleted successfully`);
  }
}

const admin = new AdminPanel("admin");
admin.deleteUser(123); // 输出: User 123 deleted successfully

const user = new AdminPanel("user");
user.deleteUser(456); // 输出: User does not have permission to access deleteUser

2. 重试装饰器：

function retry(maxRetries = 3, delay = 1000) {
  return function(target, name, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          return await originalMethod.apply(this, args);
        } catch (error) {
          console.log(`Attempt ${retries + 1} failed: ${error}`);
          retries++;
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
      console.error(`Method ${name} failed after ${maxRetries} retries`);
      throw new Error(`Method ${name} failed after multiple retries`);
    };

    return descriptor;
  };
}

class DataFetcher {
  @retry(3, 2000)
  async fetchData() {
    // 模拟一个可能失败的网络请求
    const randomNumber = Math.random();
    if (randomNumber < 0.5) {
      throw new Error("Failed to fetch data");
    }
    console.log("Data fetched successfully");
    return "Data";
  }
}

const fetcher = new DataFetcher();
fetcher.fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

第六部分：总结与展望：拥抱装饰器，拥抱更美好的未来！

总而言之，JavaScript 装饰器是一种强大的语言特性，它可以帮助我们编写更加模块化、可维护和可扩展的代码。虽然它经历了漫长的发展历程，但最终有望成为 ECMAScript 标准的一部分。

随着 JavaScript 的不断发展，我们可以期待装饰器在未来的开发中发挥更大的作用，例如：

更强大的元数据支持： 装饰器可以与元数据 API 结合使用，提供更丰富的元数据信息，方便进行更高级的编程。
更广泛的应用场景： 装饰器可以应用于更多的场景，例如 Web Components、React Hooks 等。
更好的工具支持： 编译器和 IDE 可以提供更好的装饰器支持，例如自动补全、类型检查等。

希望今天的讲座能帮助大家更好地理解 JavaScript 装饰器。记住，它就像一个“变形金刚”，能让你的代码变得更加强大和灵活。拥抱装饰器，拥抱更美好的 JavaScript 开发未来吧！

感谢大家的聆听！

发表回复 取消回复

发表回复取消回复