各位观众老爷，大家好！今天咱们聊聊 JavaScript 装饰器（Decorators），这玩意儿虽然还在 Stage 3 阶段，但已经足够让人兴奋了，因为它能让我们的代码更优雅、更易维护。今天咱们就来好好剖析一下装饰器的应用顺序，特别是 Class、Method 和 Field 装饰器之间的关系。准备好了吗？Let’s go！
什么是装饰器？
首先，咱们得搞清楚什么是装饰器。简单来说，装饰器就是一个函数，它可以用来修改或增强类、方法、属性等的行为，而无需修改其原始代码。就像给你的房子装修一样，你不需要拆掉房子，只需要添加一些装饰品，就能让它焕然一新。
装饰器的语法
JavaScript 装饰器使用 @ 符号，后面跟着装饰器函数。例如：
@log
class MyClass {
constructor() {
console.log('MyClass constructed');
}
}
function log(target) {
console.log('Class decorated!');
console.log(target); // target 就是 MyClass
}在这个例子中，@log 就是一个装饰器，它会调用 log 函数，并将 MyClass 作为参数传递给它。
装饰器的类型
装饰器主要有三种类型：
- 类装饰器 (Class Decorators): 用于装饰类本身。
- 方法装饰器 (Method Decorators): 用于装饰类的方法。
- 字段装饰器 (Field Decorators): 用于装饰类的字段（属性）。
装饰器的应用顺序：重头戏来了！
现在，我们来聊聊今天的重点：装饰器的应用顺序。记住一句话：由内而外，自下而上。
这句话怎么理解呢？
- 由内而外： 如果一个类同时使用了类装饰器、方法装饰器和字段装饰器，那么它们的执行顺序是：字段装饰器 -> 方法装饰器 -> 类装饰器。 想象一下，你要装修房子，肯定是先搞定里面的家具（字段），再搞定墙壁（方法），最后才是整个房子的外观（类）。
- 自下而上： 如果同一个目标（比如一个类）使用了多个装饰器，那么它们的执行顺序是从下往上。就像叠积木，你肯定是从最下面的积木开始叠起。
为了更清晰地说明，咱们来个例子：
function logClass(target) {
console.log('Class Decorator Executed');
}
function logMethod(target, propertyKey, descriptor) {
console.log('Method Decorator Executed');
}
function logField(target, propertyKey) {
console.log('Field Decorator Executed');
}
@logClass
class MyClass {
@logField
myField = 'Hello';
@logMethod
myMethod() {
console.log('My method called');
}
}
// Expected Output:
// Field Decorator Executed
// Method Decorator Executed
// Class Decorator Executed在这个例子中，MyClass 同时使用了 logClass、logMethod 和 logField 三个装饰器。根据我们刚才说的规则，它们的执行顺序是：
@logField(字段装饰器)@logMethod(方法装饰器)@logClass(类装饰器)
更复杂的例子：多个装饰器叠加
如果同一个目标使用了多个装饰器，情况会怎样呢？
function first(target) {
console.log('First Decorator');
}
function second(target) {
console.log('Second Decorator');
}
@first
@second
class MyClass {
constructor() {
console.log('MyClass constructed');
}
}
// Expected Output:
// Second Decorator
// First Decorator
// MyClass constructed在这个例子中，MyClass 同时使用了 first 和 second 两个装饰器。它们的执行顺序是：
@second(先遇到，后执行)@first(后遇到，先执行)
也就是说，装饰器的执行顺序是从下往上的。你可以把这个想象成函数调用栈，后进先出。
装饰器的参数
不同的装饰器类型，接收的参数也不同。
| 装饰器类型 | 参数 | 说明 |
|---|---|---|
| 类装饰器 | target (被装饰的类) |
target 就是被装饰的类本身。你可以在装饰器中修改类的原型，添加静态属性等等。 |
| 方法装饰器 | target (类的原型对象), propertyKey (方法名), descriptor (属性描述符) |
target 是类的原型对象，也就是说，如果你的方法是实例方法，那么 target 就是 MyClass.prototype。propertyKey 是方法的名字，比如 myMethod。descriptor 是属性描述符，它是一个对象，包含 value (方法本身), writable, enumerable, configurable 等属性。你可以修改 descriptor 来改变方法的行为，比如修改方法的 value，或者使其不可枚举。 |
| 字段装饰器 | target (类的原型对象), propertyKey (字段名) |
target 同样是类的原型对象。propertyKey 是字段的名字，比如 myField。需要注意的是，字段装饰器只能观察到字段的定义，而不能直接修改字段的值。如果想要在字段初始化时修改其值，可以使用 initializer 方法。 |
代码示例：深入理解参数
function logMethodDetails(target, propertyKey, descriptor) {
console.log('Target:', target); // 类的原型对象
console.log('Property Key:', propertyKey); // 方法名
console.log('Descriptor:', descriptor); // 属性描述符
// 修改方法
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log('Before calling method:', propertyKey);
const result = originalMethod.apply(this, args);
console.log('After calling method:', propertyKey);
return result;
};
return descriptor; // 必须返回修改后的 descriptor
}
class MyClass {
@logMethodDetails
myMethod(arg1, arg2) {
console.log('My method called with arguments:', arg1, arg2);
return arg1 + arg2;
}
}
const myInstance = new MyClass();
myInstance.myMethod(1, 2);
// Expected Output:
// Target: { myMethod: [Function (anonymous)] }
// Property Key: myMethod
// Descriptor: { writable: true, enumerable: false, configurable: true, value: [Function: myMethod] }
// Before calling method: myMethod
// My method called with arguments: 1 2
// After calling method: myMethod在这个例子中，logMethodDetails 装饰器接收了 target、propertyKey 和 descriptor 三个参数，我们打印了这些参数的值，以便更好地理解它们。同时，我们还修改了 descriptor.value，也就是修改了 myMethod 方法本身，在方法调用前后添加了日志输出。
字段装饰器的特殊性：initializer
字段装饰器不能直接修改字段的值，但可以通过 initializer 方法来实现。
function initValue(initialValue) {
return function (target, propertyKey) {
return {
initializer() {
console.log(`Initializing ${propertyKey} with value: ${initialValue}`);
return initialValue;
}
};
};
}
class MyClass {
@initValue('Default Value')
myField;
constructor() {
console.log('MyField value:', this.myField);
}
}
const myInstance = new MyClass();
// Expected Output:
// Initializing myField with value: Default Value
// MyField value: Default Value在这个例子中，initValue 装饰器返回了一个对象，该对象包含 initializer 方法。initializer 方法会在字段初始化时被调用，它的返回值就是字段的初始值。
实际应用场景
装饰器可以应用在很多场景中，比如：
- 日志记录： 记录方法调用信息，方便调试。
- 性能监控： 测量方法的执行时间，找出性能瓶颈。
- 权限验证： 检查用户是否有权限访问某个方法。
- 缓存： 缓存方法的计算结果，避免重复计算。
- 依赖注入： 将依赖注入到类中。
示例：权限验证
function authorize(role) {
return function (target, propertyKey, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
const userRole = this.getUserRole(); // 假设有一个方法可以获取用户角色
if (userRole === role) {
return originalMethod.apply(this, args);
} else {
console.log('Unauthorized access to', propertyKey);
return null; // 或者抛出一个错误
}
};
return descriptor;
};
}
class MyService {
getUserRole() {
// 模拟获取用户角色
return 'admin';
}
@authorize('admin')
sensitiveData() {
console.log('Accessing sensitive data...');
return 'Top Secret';
}
}
const myService = new MyService();
const data = myService.sensitiveData(); // 输出 "Accessing sensitive data..." 和 "Top Secret"
// 如果 getUserRole() 返回 'user'，则会输出 "Unauthorized access to sensitiveData"总结
好了，今天我们深入探讨了 JavaScript 装饰器的应用顺序，以及不同类型装饰器的参数和用法。记住以下几点：
- 装饰器可以修改或增强类、方法、属性的行为。
- 装饰器的执行顺序是：由内而外，自下而上。 (Field -> Method -> Class, 多个装饰器从下往上)
- 不同类型的装饰器接收的参数不同。
- 字段装饰器需要使用
initializer方法来修改字段的初始值。
希望今天的讲座能帮助你更好地理解和使用 JavaScript 装饰器。 装饰器还是一个比较新的特性，所以在使用时请注意兼容性。
记住，代码的世界充满了乐趣，多尝试，多实践，你就能成为真正的编程大师！ 下次再见！