J*aScript装饰器模式_Decorator使用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript装饰器模式_Decorator使用

2025-11-25

浏览次数：次

返回列表

装饰器模式通过函数动态扩展对象功能而不修改原代码。在 TypeScript 中，使用 @decorator 语法可对类、方法、属性、参数进行增强，如 Injectable 注册服务、Log 记录日志、Required 标记必填字段、QueryParam 识别参数用途，广泛用于权限控制、缓存、校验和依赖注入等场景。

javascript装饰器模式_decorator使用

装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许你动态地给对象添加新功能，而不需要修改原有的代码。在 J*aScript 中，装饰器提供了一种优雅的方式来扩展类或方法的行为，尤其在 TypeScript 和现代框架（如 Angular、React + Babel 装饰器支持）中被广泛使用。

什么是装饰器（Decorator）

装饰器本质上是一个函数，用来“包装”或“增强”类、方法、属性或参数。它通过在定义时使用 @decoratorName 语法来应用，属于元编程的一种方式。

目前装饰器是 J*aScript 的提案功能，在 TypeScript 或使用 Babel 等工具的项目中可以启用。标准尚未完全定稿，但已被广泛应用。

装饰器的基本语法与类型

装饰器可以应用于以下几个位置：

类装饰器：作用于整个类
方法装饰器：作用于类的方法
属性装饰器：作用于类的属性
参数装饰器：作用于方法的参数

示例：启用装饰器（TypeScript 配置）

在 tsconfig.json 中启用实验性装饰器：

{
  "compilerOptions": {
    "target": "ES2016",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

实际应用示例

1. 类装饰器：自动注册类

用于标记某个类为可注入服务或组件。

function Injectable(target: Function) {
  console.log('类已注册为可注入:', target.name);
}

@Injectable
class UserService {
  getName() {
    return 'Alice';
  }
}

// 输出：类已注册为可注入: UserService

2. 方法装饰器：日志记录

SmartB2B行业电子商务

SmartB2B 是一款基于PHP、MySQL、Smarty的B2B行业电子商务网站管理系统，系统提供了供求模型、企业模型、产品模型、人才招聘模型、资讯模型等模块，适用于想在行业里取得领先地位的企业快速假设B2B网站，可以运行于Linux与Windows等多重服务器环境，安装方便，使用灵活。系统使用当前流行的PHP语言开发，以MySQL为数据库，采用B/S架构，MVC模式开发。融入了模型化、模板

0 查看详情 SmartB2B行业电子商务

在方法执行前后打印日志，常用于调试或监控。

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`调用方法: ${propertyKey}，参数:`, args);
    const result = originalMethod.apply(this, args);
    console.log(`方法返回值:`, result);
    return result;
  };

  return descriptor;
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);
// 输出：
// 调用方法: add，参数: [2, 3]
// 方法返回值: 5

3. 属性装饰器：标记字段

常用于 ORM 或表单验证场景。

function Required(target: Object, propertyKey: string) {
  console.log(`字段必填: ${propertyKey}`);
}

class LoginForm {
  @Required
  username!: string;
  password!: string;
}
// 输出：字段必填: username

4. 参数装饰器：标识参数用途

function QueryParam(target: Object, methodName: string, paramIndex: number) {
  console.log(`参数 ${paramIndex} 是查询参数，属于方法 ${methodName}`);
}

class UserController {
  getUsers(@QueryParam page: number, limit: number) {
    // 模拟分页请求
  }
}
// 输出：参数 0 是查询参数，属于方法 getUsers