各位观众，晚上好！今天咱们来聊聊 JavaScript Decorators，这玩意儿啊，说白了就是给你的代码“贴标签”、“加buff”，让你的代码更强大，更灵活。不过要注意，现在我们说的是 Stage 3 的 Decorators 提案，最终定稿可能还会有些许变化，但核心思想不会变。
什么是 Decorators？为啥要用它？
想象一下，你是一位建筑师，设计房子的时候，有些房间需要特别的装饰，比如防盗、隔音、智能控制等等。Decorator 就好比是这些装饰，你可以把它们“贴”在对应的房间上，而不需要修改房间本身的结构。
在代码世界里，Decorator 是一种特殊的声明，可以附加到类、方法、属性或参数上。它本质上就是一个函数，接收被装饰的对象作为参数，然后返回一个修改后的对象，或者直接修改原对象（不推荐）。
为什么要用 Decorators？
- 代码复用： 将通用的逻辑封装成 Decorator，可以在多个地方重复使用，避免代码冗余。
- 逻辑分离： 将装饰逻辑与核心业务逻辑分离，使代码更清晰，更易于维护。
- 元编程能力： Decorator 提供了一种在运行时修改代码行为的能力，这在框架开发和AOP（面向切面编程）中非常有用。
三种 Decorator 类型：Method, Field, Class
Decorator 主要分为三种类型：Method Decorator（方法装饰器）、Field Decorator（字段装饰器）和 Class Decorator（类装饰器）。它们作用的对象不同，使用方式也略有差异。
1. Class Decorator (类装饰器)
这是最简单的一种 Decorator。它接收类的构造函数作为参数，可以用来修改类的行为，比如添加属性、方法，甚至替换整个类。
语法：
@decorator
class MyClass {
// ...
}工作原理：
@decorator 实际上等价于 MyClass = decorator(MyClass)。也就是说，Decorator 函数接收 MyClass 的构造函数作为参数，然后返回一个新的构造函数（或者直接修改 MyClass）。
例子：
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
@sealed
class BugReport {
constructor(public id: number) {}
submit() {
return "Bug report submitted!";
}
}
// 尝试添加属性或方法将会失败（严格模式下会报错，非严格模式下无提示）
BugReport.prototype.test = function() { console.log("test") };
BugReport.description = "test";
const bug = new BugReport(1);
console.log(bug.submit()); // 输出 "Bug report submitted!"解释：
sealed是一个 Class Decorator，它接收一个构造函数constructor作为参数。Object.seal方法会阻止对象添加新属性，并将所有现有属性标记为不可配置。@sealed将sealedDecorator 应用到BugReport类上，使得BugReport类及其原型都被冻结，无法添加新的属性或方法。
应用场景：
- 冻结类： 阻止类被修改，保证类的完整性。
- 单例模式： 确保类只有一个实例。
- 依赖注入： 在类创建时注入依赖项。
2. Method Decorator (方法装饰器)
Method Decorator 用于装饰类的方法。它接收三个参数：
target：类的原型对象。propertyKey：方法的名字。descriptor：方法的属性描述符（Object.getOwnPropertyDescriptor() 的返回值）。
语法：
class MyClass {
@decorator
myMethod() {
// ...
}
}工作原理：
@decorator 实际上等价于 Object.defineProperty(MyClass.prototype, "myMethod", decorator(MyClass.prototype, "myMethod", Object.getOwnPropertyDescriptor(MyClass.prototype, "myMethod")))。也就是说，Decorator 函数接收方法的原型对象、方法名和属性描述符作为参数，然后返回一个新的属性描述符，或者直接修改原有的属性描述符。
例子：
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${propertyKey} with arguments: ${args}`);
const result = originalMethod.apply(this, args);
console.log(`Method ${propertyKey} returned: ${result}`);
return result;
};
return descriptor;
}
class Calculator {
@log
add(x: number, y: number) {
return x + y;
}
}
const calculator = new Calculator();
const result = calculator.add(2, 3); // 输出日志信息
console.log(result); // 输出 5解释：
log是一个 Method Decorator，它接收target（Calculator.prototype）、propertyKey（"add"）和descriptor作为参数。- Decorator 修改了
add方法的属性描述符，用一个新的函数替换了原来的value。 - 新的函数在调用
add方法前后打印日志信息，并返回add方法的返回值。 @log将logDecorator 应用到Calculator类的add方法上，使得每次调用add方法都会打印日志。
应用场景：
- 日志记录： 记录方法的调用情况。
- 性能监控： 测量方法的执行时间。
- 权限验证： 检查用户是否有权限调用方法。
- 缓存： 缓存方法的返回值，避免重复计算。
- 重试机制： 当方法调用失败时自动重试。
3. Field Decorator (字段装饰器)
Field Decorator 用于装饰类的字段（属性）。它接收两个参数：
target：类的原型对象。propertyKey：字段的名字。
语法：
class MyClass {
@decorator
myField: string;
}工作原理：
@decorator 实际上等价于 Object.defineProperty(MyClass.prototype, "myField", decorator(MyClass.prototype, "myField"))。也就是说，Decorator 函数接收字段的原型对象和字段名作为参数，然后返回一个属性描述符，或者直接修改原有的属性描述符。需要注意的是，Field Decorator 在类实例化之前执行，因此无法访问到类的实例。通常 Field Decorator 用于修改属性的访问方式，比如将其变成只读属性，或者添加 getter/setter。
例子：
function readonly(target: any, propertyKey: string) {
Object.defineProperty(target, propertyKey, {
writable: false,
configurable: false
});
}
class Person {
@readonly
name: string = "Alice";
}
const person = new Person();
console.log(person.name); // 输出 "Alice"
// 尝试修改 name 属性将会失败（严格模式下会报错，非严格模式下无提示）
// person.name = "Bob";解释：
readonly是一个 Field Decorator，它接收target（Person.prototype）和propertyKey（"name"）作为参数。- Decorator 使用
Object.defineProperty方法将name属性的writable设置为false，使得name属性变成只读属性。 @readonly将readonlyDecorator 应用到Person类的name属性上，使得name属性只能在声明时赋值，之后无法修改。
应用场景：
- 只读属性： 创建只读属性，防止属性被意外修改。
- 类型检查： 在属性赋值时进行类型检查。
- 延迟加载： 延迟加载属性的值，直到第一次访问时才进行计算。
- 数据绑定： 将属性与UI元素绑定，实现数据同步。
- 自动计算属性： 属性值依赖于其他属性自动计算，每次访问都重新计算。
元编程和框架扩展中的应用
Decorator 在元编程和框架扩展中扮演着重要的角色。通过 Decorator，我们可以在运行时修改代码的行为，从而实现更高级的功能。
1. 元编程：
元编程是指编写可以操作其他程序的程序。Decorator 提供了一种在运行时修改类、方法和属性的能力，这使得我们可以编写更灵活、更强大的代码。
例子：
function serialize(target: any) {
target.prototype.serialize = function() {
return JSON.stringify(this);
};
}
@serialize
class User {
constructor(public name: string, public age: number) {}
}
const user = new User("Bob", 30);
console.log(user.serialize()); // 输出 '{"name":"Bob","age":30}'解释：
serialize是一个 Class Decorator，它接收一个构造函数target作为参数。- Decorator 在
target.prototype上添加了一个serialize方法，该方法将对象序列化为 JSON 字符串。 @serialize将serializeDecorator 应用到User类上，使得User类的实例都拥有serialize方法。
2. 框架扩展：
许多 JavaScript 框架都使用 Decorator 来扩展框架的功能，提供更简洁、更易用的 API。
例子 (React + MobX):
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import { Component } from 'react';
class Store {
@observable count = 0;
increment() {
this.count++;
}
}
const store = new Store();
@observer
class Counter extends Component {
render() {
return (
<div>
<p>Count: {store.count}</p>
<button onClick={() => store.increment()}>Increment</button>
</div>
);
}
}
export default Counter;解释：
@observable是 MobX 提供的 Decorator，它将count属性变成可观察对象，当count属性发生变化时，会自动触发组件的重新渲染。@observer是 MobX-React 提供的 Decorator，它将Counter组件变成观察者，当组件依赖的可观察对象发生变化时，会自动重新渲染组件。
其他框架的应用：
- Angular: 使用 Decorator 定义组件、指令和服务。
- NestJS: 使用 Decorator 定义控制器、路由和中间件。
- TypeORM: 使用 Decorator 定义实体和关系。
总结
JavaScript Decorators 是一种强大的元编程工具，可以用来扩展代码的功能，提高代码的可读性和可维护性。虽然目前 Decorators 还在 Stage 3 提案阶段，但已经得到了广泛的应用，相信在未来会成为 JavaScript 开发中不可或缺的一部分。
| Decorator 类型 | 作用对象 | 接收参数 | 常用场景 |
|---|---|---|---|
| Class | 类 | 类的构造函数 | 冻结类，单例模式，依赖注入 |
| Method | 方法 | 类的原型对象，方法名，属性描述符 | 日志记录，性能监控，权限验证，缓存，重试机制 |
| Field | 字段 (属性) | 类的原型对象，字段名 | 只读属性，类型检查，延迟加载，数据绑定，自动计算属性 |
希望今天的讲解能帮助大家更好地理解 JavaScript Decorators。 谢谢大家！