JS装饰器知识综合分享，边学边掌握！📝

2024-02-23 19:42:30

一、装饰器的定义和原理
装饰器本质上是一种函数，它接受一个函数作为参数，并返回一个新的函数。这个新的函数将替换原始函数，并为其添加新的行为或功能。这种模式允许我们在不修改原始函数的情况下，为其添加功能。装饰器的主要优点是它允许我们在不修改现有代码的基础上，为其添加新功能。

// 装饰器函数
function log(target) {
  // 获取目标函数名
  const funcName = target.name;
  // 用一个新函数替换目标函数
  return function (...args) {
    // 调用原始函数
    const result = target(...args);
    // 在函数调用前后分别打印信息
    console.log(`Calling ${funcName} with arguments ${args}`);
    console.log(`Called ${funcName} with result ${result}`);
    // 返回原始函数的执行结果
    return result;
  };
}

// 将装饰器应用到函数
@log
function add(a, b) {
  return a + b;
}

// 调用函数
const result = add(1, 2);

// 输出结果
console.log(result); // 3

二、装饰器模式的应用场景

装饰器模式具有广泛的应用场景，包括以下几个方面：

为函数或类添加新的功能。 例如，装饰器可以用于记录函数的调用次数、测量函数的执行时间、验证函数的参数等。
为函数或类提供额外的元数据。 例如，装饰器可以用于标记函数或类所属的模块、作者、版本等信息。
动态修改函数或类的行为。 例如，装饰器可以用于根据不同的条件修改函数或类的行为，实现动态的代码执行。

三、装饰器的语法和用法

装饰器的语法很简单，它在函数或类声明之前使用 @ 符号后跟装饰器函数的名称。例如：

// 装饰器函数
function log(target) {
  // 获取目标函数名
  const funcName = target.name;
  // 用一个新函数替换目标函数
  return function (...args) {
    // 调用原始函数
    const result = target(...args);
    // 在函数调用前后分别打印信息
    console.log(`Calling ${funcName} with arguments ${args}`);
    console.log(`Called ${funcName} with result ${result}`);
    // 返回原始函数的执行结果
    return result;
  };
}

// 将装饰器应用到函数
@log
function add(a, b) {
  return a + b;
}

// 调用函数
const result = add(1, 2);

// 输出结果
console.log(result); // 3