装饰出风采：JS装饰器的前世今生

前端

2023-09-30 02:17:27

JS装饰器：深潜装饰器的世界

在JavaScript的广阔世界中，装饰器闪耀着迷人的光芒，它们拥有改变代码功能的魔力，而这一切只需轻点一个符号。

装饰器的诞生

装饰器并非JavaScript独有，它们起源于Python的优雅殿堂。然而，ES2015的到来将装饰器正式纳入了JavaScript的标准，自此它们便在JS开发者的工具箱中占据了不可撼动的地位。

装饰器的超能力

装饰器带来了令人惊叹的优势：

代码复用： 装饰器可将代码逻辑从目标代码中抽离，便于复用，提升维护性。
代码扩展： 无需修改原始代码，装饰器即可增强代码功能，保持灵活性。
强大的应用场景： 日志记录、计时、缓存、权限控制、类型检查等场景中，装饰器都能大显身手。

JS装饰器的语法糖

使用JS装饰器非常简单，只需在目标代码前加上一个神奇的@符号，紧跟装饰器名即可：

// 日志记录装饰器
function log(target, name, descriptor) {
  // 获取原始方法
  const originalMethod = descriptor.value;

  // 用日志包装原始方法
  descriptor.value = function(...args) {
    console.log(`调用${name}，参数：${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`调用${name}，结果：${result}`);
    return result;
  };
}

// 使用日志记录装饰器
@log
function add(a, b) {
  return a + b;
}

装饰器家族的成员

装饰器家族成员众多，各有专攻：

函数装饰器： 修改或扩展函数行为。
类装饰器： 修改或扩展类属性或方法。
属性装饰器： 修改或扩展类属性。
参数装饰器： 修改或扩展函数参数。

实战演练：日志记录装饰器

我们亲手打造一个日志记录装饰器，为函数添加日志功能：

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

  descriptor.value = function(...args) {
    console.log(`调用${name}，参数：${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`调用${name}，结果：${result}`);
    return result;
  };
}

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

sum(1, 2);