当前位置：首页 > 文章列表 > 文章 > 前端 > JS装饰器原理与实战应用解析

JS装饰器原理与实战应用解析

2025-08-20 13:35:32 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JS装饰器实现与实际应用解析》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

在JavaScript中实现装饰器主要有两种方式：一是使用高阶函数，二是采用ES7+的装饰器语法（@decorator）。高阶函数通过接收原函数并返回增强后的新函数，可在不修改原函数的前提下添加日志、缓存、性能监控等横切功能，兼容性好且无需转译，适用于函数级别的装饰；而ES7+装饰器语法更具声明性，支持类和类成员的装饰，通过@符号直接标注，可实现类的密封、方法只读、废弃提示、权限校验、数据验证、依赖注入和路由定义等高级元编程能力，但需借助Babel等工具转译，目前仍处于提案阶段。两种方式均遵循开闭原则，实现关注点分离、代码复用与可维护性提升，其中高阶函数适用于通用函数增强，ES7+装饰器更适合类结构化应用与框架开发，开发者可根据项目需求和技术栈选择合适方案。

JS如何实现装饰器？装饰器模式应用

在JavaScript中实现装饰器，主要有两种途径：一种是利用高阶函数（Higher-Order Functions）来包装现有函数或类，这是装饰器模式在JS中的经典实现；另一种是借助ES7+提案中的装饰器语法（@decorator），这种语法更具声明性，但目前仍处于提案阶段，需要Babel等工具转译才能使用。核心思想都是在不修改原有代码结构的前提下，为对象或函数添加新的行为或修改其现有行为。

解决方案

在JavaScript中，实现装饰器模式，我们通常会选择以下两种方式，这取决于你当前项目的技术栈和对未来语言特性的采纳程度。

1. 基于高阶函数的实现（函数装饰器）

这是最通用、兼容性最好的方式。一个高阶函数接收一个函数作为参数，并返回一个新的函数，这个新函数在执行时会包含原函数的功能，并附加了额外的逻辑。

// 简单的日志装饰器
function logDecorator(func) {
  return function(...args) {
    console.log(`Calling function: ${func.name || 'anonymous'} with args:`, args);
    const result = func.apply(this, args); // 保持this上下文
    console.log(`Function ${func.name || 'anonymous'} returned:`, result);
    return result;
  };
}

// 简单的缓存装饰器
function memoizeDecorator(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args); // 简单的缓存键生成
    if (cache[key]) {
      console.log(`Cache hit for ${func.name || 'anonymous'} with args:`, args);
      return cache[key];
    }
    console.log(`Cache miss for ${func.name || 'anonymous'} with args:`, args);
    const result = func.apply(this, args);
    cache[key] = result;
    return result;
  };
}

// 示例应用
function add(a, b) {
  return a + b;
}

const loggedAdd = logDecorator(add);
loggedAdd(1, 2); // 会输出日志

const memoizedAdd = memoizeDecorator(add);
memoizedAdd(3, 4); // 第一次计算并缓存
memoizedAdd(3, 4); // 第二次直接从缓存获取

2. 基于ES7+提案的装饰器语法（类装饰器与方法装饰器）

这种方式更接近其他语言（如Python、Java）的装饰器语法，通过@符号直接应用于类或类的方法上。这极大提升了代码的可读性和声明性，但需要Babel等工具进行转译。

类装饰器：

一个类装饰器接收构造函数作为参数，并可以返回一个新的构造函数，或者修改原构造函数。

// @sealed 装饰器：让类不可扩展，属性不可配置
function sealed(constructor) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
  return constructor; // 可以选择返回原构造函数或新的构造函数
}

// @logClass 装饰器：打印类被创建时的信息
function logClass(constructor) {
  console.log(`Class ${constructor.name} was defined.`);
  return class extends constructor {
    constructor(...args) {
      super(...args);
      console.log(`Instance of ${constructor.name} created.`);
    }
  };
}

@sealed
@logClass // 多个装饰器会从下往上执行，但实际应用时，类装饰器通常是修改或替换类本身
class MyClass {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

const instance = new MyClass('World');
console.log(instance.greet());

// 尝试修改或扩展 MyClass 会失败
try {
  MyClass.prototype.newMethod = function() {};
} catch (e) {
  console.error("Cannot add new method to sealed class prototype:", e.message);
}

方法装饰器：

方法装饰器接收三个参数：target（类的原型对象）、key（方法名）、descriptor（属性描述符）。它通常通过修改descriptor.value来改变方法的行为。

// @readonly 装饰器：让方法变为只读（不可修改、不可删除）
function readonly(target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

// @deprecate 装饰器：标记方法已废弃
function deprecate(message) {
  return function(target, key, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
      console.warn(`Warning: Method "${key}" is deprecated. ${message}`);
      return originalMethod.apply(this, args);
    };
    return descriptor;
  };
}

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

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

  @deprecate('Please use getName() instead.')
  oldGetName() {
    return this.name;
  }
}

const user = new User('Alice');
console.log(user.getName());
user.oldGetName(); // 会触发废弃警告

// 尝试修改 getName 方法会失败
try {
  user.getName = function() { return 'New Name'; };
} catch (e) {
  console.error("Cannot reassign readonly method:", e.message);
}

为什么我们需要装饰器模式？

思考一下，我们写代码时总会遇到一些横切关注点（Cross-cutting Concerns），比如日志记录、性能监控、权限校验、数据验证、事务管理等等。这些功能往往散落在应用程序的各个模块中，如果直接把它们的代码写到业务逻辑里，那业务代码就会变得臃肿、难以维护。

装饰器模式，本质上就是提供了一种优雅的方案来处理这些横切关注点。它允许你在不修改原有对象（或函数）代码的前提下，动态地给它们“穿上”一层新的功能外衣。这就像给一个普通杯子加上保温套、防滑垫一样，杯子本身还是那个杯子，但它现在有了额外的功能。

这种模式的好处显而易见：

分离关注点： 业务逻辑保持纯粹，与非业务功能解耦。
代码复用： 装饰器本身是可复用的功能模块，可以应用到多个不同的目标上。
可维护性： 当需要修改或移除某个横切功能时，只需修改或移除对应的装饰器，而无需触碰核心业务逻辑。
开闭原则： 对扩展开放，对修改封闭。你可以很方便地添加新功能（通过新增装饰器），而无需修改已有的代码。

我个人觉得，当你发现自己的函数或类开始变得“胖”起来，里面塞满了各种与核心职责无关的辅助性代码时，就应该考虑引入装饰器了。它能让你的代码看起来更整洁，也更符合面向对象的设计原则。

如何使用高阶函数实现JavaScript装饰器？

高阶函数实现装饰器，其实是JavaScript函数式编程思想的一种体现。它非常灵活，不需要任何特殊的语法支持，因此在任何JS环境中都可以使用。

核心原理很简单：一个函数（我们称之为“装饰器函数”）接收另一个函数作为参数，然后返回一个新的函数。这个新返回的函数在内部调用原始函数，并在其前后或者特定位置插入额外的逻辑。

举个例子，假设我们有一个计算阶乘的函数：

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

现在，我们想知道这个函数每次执行花了多少时间。我们不希望直接修改factorial函数，因为那样会污染它的核心逻辑。这时，一个高阶函数就能派上用场：

// 性能监控装饰器
function measurePerformance(originalFunc) {
  return function(...args) { // 返回一个新的函数
    const start = performance.now(); // 记录开始时间
    const result = originalFunc.apply(this, args); // 调用原始函数，并保持this上下文
    const end = performance.now(); // 记录结束时间
    console.log(`${originalFunc.name || 'anonymous'} took ${end - start} ms to execute.`);
    return result; // 返回原始函数的执行结果
  };
}

// 应用装饰器
const measuredFactorial = measurePerformance(factorial);

// 调用被装饰的函数
console.log(measuredFactorial(5));
console.log(measuredFactorial(10));

这里的measurePerformance就是一个高阶函数实现的装饰器。它接收factorial作为参数，返回了一个新的函数measuredFactorial。当我们调用measuredFactorial时，实际上是执行了measurePerformance内部返回的那个匿名函数，这个匿名函数在调用factorial的前后添加了计时逻辑。

这种方式的优点在于它的纯粹性和通用性。你可以很方便地组合多个高阶函数装饰器，形成一个功能链。比如，你可以在measurePerformance之前再套一个logDecorator，先打印日志再测量性能。

当然，也有一些小“缺点”：它不如ES7+的@语法直观，每次都需要手动包装。另外，对于类的方法，你需要手动访问原型链上的方法进行包装，不如ES7+方法装饰器那样直接作用于方法定义上。但就函数而言，高阶函数装饰器绝对是首选。

ES7+的装饰器语法有哪些特点与应用场景？

ES7+（目前仍是Stage 3提案）引入的装饰器语法，用一个@符号，让装饰器的应用变得异常简洁和声明性。它主要针对类和类的成员（方法、属性、Getter/Setter）进行装饰，而不是像高阶函数那样直接装饰普通的函数。这让它在构建大型、结构化的应用程序时，特别是与框架（如Angular、NestJS）结合时，显得特别强大。

特点：

声明性语法： 直接在类或方法定义上方使用@decoratorName，一目了然地表明该类或方法被赋予了额外功能。
作用目标明确： 装饰器函数会接收到关于被装饰目标（类、方法等）的特定信息，例如类构造函数、方法名、属性描述符等。这使得装饰器可以精确地修改或增强目标。
可组合性： 多个装饰器可以堆叠在同一个目标上，它们会按照从下往上的顺序执行（对于类和方法装饰器而言，执行顺序是自底向上，但通常会认为最靠近目标的装饰器先应用）。
元编程能力： 装饰器在运行时提供了修改类定义或方法行为的能力，这是一种强大的元编程（meta-programming）工具。

应用场景：

ES7+装饰器在实际开发中有着广泛的应用，尤其是在框架和库的开发中，它们能极大地简化代码并提升可读性。

日志记录与性能监控： 这是最常见的应用。你可以创建一个@log装饰器，自动记录方法被调用时的参数和返回值；或者一个@measure装饰器，统计方法的执行时间。

// 假设这是我们的装饰器实现
// function log(target, key, descriptor) { /* ... */ }
// function measure(target, key, descriptor) { /* ... */ }

class Calculator {
  @log
  @measure
  add(a, b) {
    return a + b;
  }
}
const calc = new Calculator();
calc.add(1, 2); // 自动打印日志和性能数据

权限控制与认证： 在Web应用中，经常需要检查用户是否有权限访问某个方法或资源。@authRequired、@hasRole('admin')这样的装饰器可以非常方便地在方法执行前进行权限校验。
```
// function authRequired(target, key, descriptor) { /* ... */ }
class AdminPanel {
  @authRequired
  deleteUser(userId) {
    console.log(`Deleting user: ${userId}`);
  }
}
```
数据验证： 在处理表单输入或API请求时，往往需要对数据进行严格的验证。@validate(schema)装饰器可以在方法执行前自动根据预定义的Schema进行数据校验，如果失败则抛出错误。
```
// function validate(schema) { return function(target, key, descriptor) { /* ... */ }; }
class UserService {
  @validate({ name: String, age: Number })
  createUser(data) {
    console.log('Creating user:', data);
  }
}
```
依赖注入： 某些框架（如Angular）使用装饰器来声明类所需的依赖，框架在创建实例时会自动注入这些依赖。例如@Injectable()、@Inject(TOKEN)。
路由定义： 在一些后端框架（如NestJS）中，装饰器被用来定义HTTP请求的路由和方法。@Get('/users')、@Post()等。
状态管理： 在某些UI库或框架中，装饰器可以用来标记可观察对象或响应式属性，以便在它们改变时自动更新UI。