JavaScript中的装饰器及其在类中的应用-js教程-PHP中文网

JavaScript中的装饰器及其在类中的应用

betcha

发布： 2025-11-09 03:35:25

原创

440人浏览过

装饰器是JavaScript中用于扩展类、方法、属性等功能的语法，通过@expression形式在运行时调用函数实现元编程，常用于日志、权限、性能监控等场景。

javascript中的装饰器及其在类中的应用

JavaScript中的装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上。它使用一种简洁的语法，通过在目标前添加@expression的形式来实现功能扩展，这种expression求值后必须是一个函数，该函数会在运行时被调用，传入被装饰的声明信息。

装饰器的基本语法与执行时机

装饰器以@符号开头，紧跟一个函数名或表达式：

@logClass class MyClass { @readonly name = 'example'; }

上述代码中，@logClass修饰整个类，@readonly修饰属性。装饰器函数在脚本加载时立即执行，而不是实例化类时才执行。这意味着装饰器是静态分析阶段起作用的机制，适合用于元编程，比如日志记录、权限控制、性能监控等场景。

类装饰器的应用方式

类装饰器接收一个参数：构造函数。它可以返回一个新的构造函数或修改原类的原型。

立即学习“Java免费学习笔记（深入）”；

function logClass(target: Function) { console.log('类被创建:', target.name); } @logClass class Person { constructor(public name: string) {} } // 输出：类被创建: Person

这个例子中，logClass在Person类定义时就被调用，打印出类名。你可以利用这一点做注册、埋点或动态增强类的行为。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

方法装饰器与属性控制

方法或属性装饰器接受三个参数：对于静态成员是类的构造函数，对于实例成员是类的原型对象；成员的名字；成员的属性描述符。

function readonly(target: any, propertyKey: string, descriptor: PropertyDescriptor) { descriptor.writable = false; } class MathOperations { @readonly pi = 3.14; }

这里@readonly确保pi属性不可更改。descriptor提供了对底层行为的控制能力，比如将方法变为只读、添加前置逻辑（类似AOP中的before advice）等。