Decorator：赋予函数新能力的魔杖

2023-09-28 13:46:33

在前端开发的浩瀚世界中，我们常常会与一位神秘的语法糖不期而遇——@ + 方法名。对于初学者而言，这可能如同一个魔法咒语，让人一头雾水。不要慌张，这就是大名鼎鼎的装饰器，英文名为 Decorator。

装饰器是一种高级编程技术，它允许我们以一种非侵入性的方式修改函数的行为。就像给函数套上一个“马甲”，赋予其额外的能力，却又不改变其原始结构。

装饰器的本质是包装函数，在函数执行前后插入额外的逻辑。这种灵活性使我们能够在不修改函数内部代码的情况下，轻松实现各种功能，如计时、日志记录和参数验证。

装饰器的应用场景非常广泛，从简单的性能优化到复杂的行为管理，应有尽有。例如，我们可以使用装饰器：

测量函数执行时间
在函数前后记录日志信息
验证函数参数的有效性
添加缓存功能
实现面向切面的编程

要使用装饰器，只需在函数名之前加上 @ 符号，后跟装饰器函数。装饰器函数接收目标函数作为参数，并返回一个包装函数。这个包装函数负责执行装饰逻辑，然后调用目标函数。

function log(target) {
  return function(...args) {
    console.log(`Calling ${target.name} with args:`, ...args);
    const result = target(...args);
    console.log(`Result of ${target.name}:`, result);
    return result;
  };
}

@log
function sum(a, b) {
  return a + b;
}

sum(1, 2); // 输出: Calling sum with args: [1, 2], Result of sum: 3