【每日一面】装饰器原理

贪婪的君子2025-11-12 12:41

装饰器原理

基础问答

问：什么是装饰器？有什么作用？

答：装饰器是一种​元编程语法，可以在不修改原有代码的前提下，动态地为类、方法、属性等添加一些能力，本质上还是一个函数，它接收目标对象、属性名、属性描述符（或类本身）作为参数，返回修改后的目标对象或属性描述符。

在使用的时候，是声明式的使用，在装饰器函数前加上一个 @ 符号，在需要使用的函数、类、方法、属性上一行的位置添加，如下：

javascript 复制代码 
// 定义类装饰器：为类添加版本信息
function addVersion(version) {
  // 装饰器函数接收类作为参数
  return function (target) {
    // 为类添加静态属性
    target.version = version;
    // 为类添加静态方法
    target.logVersion = function () {
      console.log(`版本号：${this.version}`);
    };
    // 返回修改后的类（也可返回新类）
    return target;
  };
}

// 使用装饰器修饰类
@addVersion('1.0.0')
class MyClass {
  constructor(name) {
    this.name = name;
  }
}

// 测试效果
console.log(MyClass.version); // 输出：1.0.0
MyClass.logVersion(); // 输出：版本号：1.0.0

如果你不想在本地运行，可以在 Typescript Playground 编译运行。

扩展延伸

先说个题外话，你需要知道的是，装饰器现在还是在提案阶段（TC39 Stage 3），自 2015 年提出以来，到现在依然没有成为规范的一部分，但是目前已经广泛的应用在前端的很多库中，如 MobX 、Angular 依赖注入等，只是我们在使用上略微复杂，需要通过一些编译工具（如 Babel）或 Typescript 来进行转换。

基本使用

装饰器可用于修饰​类 ​、​类方法 ​、​类属性 ​、访问器（getter/setter） 等，不同修饰的场景下的语法和参数略有一些差异。

  1. 类装饰器：一般用于修饰整个类，可以为类添加静态属性和方法（参考基础问答部分代码），也可以修改类的构造函数，示例如下：

    javascript 复制代码 
    // 定义类装饰器：为实例添加默认属性
function addDefaultProps(props: Record<string, any>) {
  return function <T extends { new (...args: any[]): {} }>(target: T) {
    // 返回一个新的类，继承自原类
    return class extends target {
      constructor(...args: any[]) {
        super(...args);
        // 添加默认属性
        Object.assign(this, props);
      }
    };
  };
}

// 使用装饰器
@addDefaultProps({ type: 'base', status: 'active' })
class MyClass {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
}

// 测试
const instance = new MyClass('test');
console.log(instance); // 输出：{ name: 'test', type: 'base', status: 'active' }

  2. 方法装饰器：方法装饰器用于修饰类的方法，接收三个参数

    ​target：类的原型对象（静态方法则为类本身）

    ​propertyKey：方法名

    ​descriptor​：方法的属性描述符（{ value, writable, enumerable, configurable }）

    typescript 复制代码 
    // 定义方法装饰器：记录方法调用日志
function log(target, propertyKey, descriptor) {
  // 保存原方法
  const originalMethod = descriptor.value;
  // 重写方法
  descriptor.value = function (...args) {
    console.log(`[日志] 调用方法 ${propertyKey}，参数：`, args);
    // 调用原方法并获取返回值
    const result = originalMethod.apply(this, args);
    console.log(`[日志] 方法 ${propertyKey} 返回：`, result);
    return result;
  };
  // 返回修改后的描述符
  return descriptor;
}

class Calculator {
  // 使用装饰器修饰方法
  @log
  add(a, b) {
    return a + b;
  }
}

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

  3. 属性装饰器：用于修饰类的属性，接收两个参数

    ​target：类的原型对象（静态属性则为类本身）

    ​propertyKey：属性名

    typescript 复制代码 
    // 定义属性装饰器：限制属性值范围
function range(min, max) {
  return function (target, propertyKey) {
    // 定义私有属性存储值（避免命名冲突）
    const privateKey = `_${propertyKey}`;
    // 通过Object.defineProperty定义属性
    Object.defineProperty(target, propertyKey, {
      get() {
        return this[privateKey];
      },
      set(value) {
        if (value < min || value > max) {
          throw new Error(`${propertyKey} 必须在 ${min}-${max} 范围内`);
        }
        this[privateKey] = value;
      }
    });
  };
}

class User {
  @range(0, 120)
  age;

  constructor(age) {
    this.age = age;
  }
}

// 测试
const user1 = new User(25);
console.log(user1.age); // 输出：25

const user2 = new User(150); 
// 抛出错误：age 必须在 0-120 范围内

  4. 访问器装饰器 ：用于修饰类的 getter​ 或 setter​，参数与方法装饰器相同（target​、propertyKey​、descriptor），返回修改后的描述符

    typescript 复制代码 
    // 定义访问器装饰器：过滤敏感字符
function sanitize(target, propertyKey, descriptor) {
  // 判断是getter还是setter
  if (descriptor.get) {
    const originalGet = descriptor.get;
    descriptor.get = function () {
      const value = originalGet.apply(this);
      // 过滤HTML标签
      return value.replace(/<[^>]+>/g, '');
    };
  }
  return descriptor;
}

class Message {
  constructor(content) {
    this._content = content;
  }

  // 使用装饰器修饰getter
  @sanitize
  get content() {
    return this._content;
  }
}

// 测试
const msg = new Message('<script>恶意代码</script> 正常内容');
console.log(msg.content); // 输出：恶意代码 正常内容（已过滤<script>标签）

需要注意的是，JavaScript 没有支持装饰器，前面说了装饰器还在提案阶段，要使用这个特性，需要通过 Typescript 或 babel 等编译器，而且随着版本的更迭，有些写法会有不同，如果你运行了这个表格

工作原理

和 JavaScript 中的 class、async/await 类似，装饰器也是一个语法糖，底层还是通过函数调用实现。

  1. 编译过程

    对于类装饰器：当使用装饰器函数修饰一个类的时候，顺序是，先定义这个类，然后在这个使用装饰器函数包裹这个类（作为参数传递），最后用函数返回值覆盖原来的类。

    你可以简单的视为：

    typescript 复制代码 
    // 源码
@decorator
class MyClass {}

// 编译后（近似）
class MyClass {}
MyClass = decorator(MyClass) || MyClass;

    更详细的编译结果，可以在自己运行一次 TypeScript 的编译得到。

    对于方法装饰器，很容易根据上面的想到，其编译过程是在类定义之后，将方法作为参数传递

  2. 执行时机

    装饰器在​类定义阶段执行（而非实例化阶段），这意味着：

    • 装饰器的逻辑在类被定义时就会执行，而非调用方法或创建实例时；
    • 装饰器内部无法访问类的实例（this指向原型对象或类本身，而非实例）。
    typescript 复制代码 
    function logWhenDefined(target) {
  console.log('类被定义了！');
  return target;
}

@logWhenDefined
class MyClass {} 
// 输出：类被定义了！（此时还未创建实例）

面试追问

  1. 装饰器和高阶函数的区别是什么？

    相同点：两者都可实现功能扩展，本质都是函数

    ​不同点：

    • 装饰器是语法糖 ，有明确的语法规范（@符号），仅用于修饰类或类成员；
    • 高阶函数是函数式编程概念，指接收函数作为参数或返回函数的函数，适用范围更广（可修饰任何函数，不限于类方法）；
    • 装饰器在类定义阶段执行 ，高阶函数在函数调用阶段执行。

    这里给出一个高阶函数示例：

    typescript 复制代码 
    // 高阶函数实现日志功能（与方法装饰器效果类似）
function withLog(fn) {
  return function (...args) {
    console.log('调用函数，参数：', args);
    const result = fn.apply(this, args);
    console.log('函数返回：', result);
    return result;
  };
}

// 用高阶函数修饰普通函数
function add(a, b) {
  return a + b;
}
const addWithLog = withLog(add);
addWithLog(1, 2)

  2. 装饰器，可以装饰函数和对象吗？

    装饰器仅支持类和类成员（方法、属性、访问器），不支持普通函数或对象，是因为函数存在函数（变量）提升，装饰器执行时机（定义阶段）与函数提升可能冲突，导致逻辑混乱，如果想实现类似的效果，建议是通过高阶函数来实现，参考上一问。

  3. 实际开发过程中，你在什么场景下使用装饰器？

    • ​日志与监控 ​：为方法添加调用日志、性能统计（如上述log​和measureTime装饰器）；

    • ​权限控制 ​：在需要权限的方法前添加权限校验（如requirePermission）；

    • ​缓存处理：为耗时方法添加结果缓存（避免重复计算）；

    • ​框架集成：

      • Angular：用装饰器定义组件（@Component）、服务（@Injectable）；
      • MobX：用@observable、@action装饰器管理状态；
      • Vue Class Component：用@Component、@Prop装饰器定义 Vue 组件；

    • 数据校验 ：为类属性添加类型或范围校验（如@range装饰器）。

  4. 使用装饰器的时候，遇到过什么问题？

    • 兼容性：装饰器仍为提案，需通过 Babel/TypeScript 转译，不同转译工具可能有语法差异；
    • 执行时机：装饰器在类定义时执行，避免在装饰器中编写依赖实例的逻辑；
    • 原型链影响：修改类或方法时需注意保持原型链完整（如单例装饰器中继承原类原型）；
    • 性能开销：装饰器会增加函数调用层级，复杂装饰器可能影响性能（需适度使用）。

  5. 你写的这个方法装饰器，为什么我运行报错？

    这个就是一个踩坑的地方，由于装饰器并没有正式的落地标准，所以你会发现有一些网上的装饰器代码你运行不起来，注意切换Typescript或babel的插件版本去解决。

    如本文中的代码，在 Typescript 3.x 版本中都可以正常使用，但是升级版本后有些就不兼容了。

参考文章

1\]: [【大前端】js装饰器的10年难产之路](https://juejin.cn/post/7439241554559729715)

热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Labelme从安装到标注：零基础完整指南07BongoCat - 跨平台键盘猫动画工具08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09看了下昨日泄露的苹果 App Store 源码……10智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践