揭秘JavaScript装饰器@decorate的妙用，让你代码更优雅！

2023-01-18 04:46:16

装饰器简介

想象一下，有一种工具可以让你在不修改代码本身的情况下，就能增强它的功能和行为。这就是装饰器的魅力所在。作为 JavaScript 中一个相对较新的特性，装饰器迅速成为一种不可或缺的工具，为开发人员提供了强大的能力。

什么是装饰器？

装饰器是可以在函数、类或其他代码结构之前或之后执行的特殊函数。它们就像代码的附加功能，允许你以一种非侵入式的方式修改其行为，而无需直接更改代码本身。

装饰器语法

JavaScript 中的装饰器函数使用 @ 符号声明。例如，以下代码定义了一个装饰器函数，它在函数执行前输出一条消息：

function log(target, name, descriptor) {
  console.log(`Calling ${name} on ${target}`);
}

@log
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('John'); // 输出: Calling greet on Window
                // 输出: Hello, John!

装饰器的工作原理

装饰器通过三个参数发挥作用：

target： 装饰器应用到的目标函数或类。
name： 目标函数或类的名称。
descriptor： 目标函数或类的属性符。

装饰器函数可以修改属性符来改变目标函数或类的行为，例如添加新的属性或方法，或修改返回值。

装饰器应用

装饰器的用途十分广泛，常见应用包括：

性能优化： 缓存函数返回值，避免重复计算。
错误处理： 捕获函数中的错误并进行处理。
安全性： 验证函数参数，确保合法性。
日志记录： 记录函数的调用信息。
缓存： 缓存函数返回值，快速获取结果。
事务管理： 确保函数执行过程中不会出现错误，若出现则回滚所有操作。

装饰器示例

性能优化：

function cache(target, name, descriptor) {
  const method = descriptor.value;

  descriptor.value = function(...args) {
    const key = `cache_${name}_${args.join(',')}`;
    if (this._cache && this._cache[key]) {
      return this._cache[key];
    }

    const result = method.apply(this, args);
    this._cache = this._cache || {};
    this._cache[key] = result;

    return result;
  };
}

class MyClass {
  @cache
  sum(a, b) {
    return a + b;
  }
}

const myClass = new MyClass();
console.log(myClass.sum(1, 2)); // 输出: 3
console.log(myClass.sum(1, 2)); // 输出: 3 (从缓存中获取)

错误处理：

function catchErrors(target, name, descriptor) {
  const method = descriptor.value;

  descriptor.value = function(...args) {
    try {
      return method.apply(this, args);
    } catch (error) {
      console.error(`Error in ${name}: ${error.message}`);
    }
  };
}

class MyClass {
  @catchErrors
  sum(a, b) {
    if (a < 0 || b < 0) {
      throw new Error('Arguments must be non-negative');
    }

    return a + b;
  }
}

const myClass = new MyClass();
console.log(myClass.sum(1, 2)); // 输出: 3
console.log(myClass.sum(-1, 2)); // 输出: Error in sum: Arguments must be non-negative