JavaScript装饰器是什么？元编程进阶技巧如何掌握

JavaScript装饰器是一种特殊语法，用于在类、方法、属性或参数上标注元数据并修改其行为，属于元编程的重要实践。通过装饰器，开发者可以把横切逻辑从业务代码中剥离，让结构更清晰。

装饰器基础与环境配置

目前装饰器仍处于提案阶段，在Node或浏览器中通常需要借助Babel开启 proposal-decorators 插件。下面给出一个最简的Babel配置示例：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

常见装饰器类型

类装饰器

类装饰器接收构造函数，可返回新的类或附加静态成员。

function sealed(target) {
  // 禁止扩展该类
  Object.seal(target);
  Object.seal(target.prototype);
  return target;
}

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

方法装饰器

方法装饰器包含三个参数：原型对象、方法名、属性描述符。下面用装饰器实现自动日志输出。

function log(target, key, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log('调用方法: ' + key + ' 参数: ' + JSON.stringify(args));
    return original.apply(this, args);
  };
  return descriptor;
}

class Calc {
  @log
  add(a, b) {
    return a + b;
  }
}

属性装饰器

属性装饰器常用于定义不可枚举或添加默认值。

function readonly(target, key) {
  Object.defineProperty(target, key, {
    writable: false
  });
}

class Config {
  @readonly
  apiUrl = 'https://ipipp.com/api';
}

元编程进阶技巧

利用 Reflect 与装饰器结合，可以实现更灵活的控制。例如统计方法执行时间：

function measure(target, key, descriptor) {
  const fn = descriptor.value;
  descriptor.value = function(...args) {
    const start = performance.now();
    const result = fn.apply(this, args);
    const end = performance.now();
    console.log(key + ' 耗时: ' + (end - start) + 'ms');
    return result;
  };
  return descriptor;
}

class Service {
  @measure
  fetchData() {
    // 模拟请求
    let sum = 0;
    for (let i = 0; i < 1e6; i++) sum += i;
    return sum;
  }
}

使用注意事项

• 装饰器执行顺序为从下往上、从内向外。
• 避免在装饰器中产生强副作用，应保证可测试性。
• 若使用 TypeScript，可在 tsconfig 中开启 experimentalDecorators。

装饰器不是万能抽象，合理边界才能让元编程真正提升工程效率。

掌握 JavaScript 装饰器与元编程技巧，能够让你以声明式方式组织复杂逻辑，写出更易维护的前端架构。

JavaScript装饰器元编程decorator修改时间：2026-07-25 19:00:15