各位观众老爷，晚上好！今天咱们聊聊 JavaScript 装饰器（Decorators）这个磨人的小妖精。尤其是它那让人抓狂的“应用顺序”和“求值策略”。别怕，我保证用最接地气的方式，把这俩概念给你掰扯明白，争取让各位听完之后，不仅能用上装饰器，还能玩得转。
一、啥是装饰器？先来个热身
简单来说，装饰器就是一种在不修改原有类或函数代码的基础上，给它们动态添加额外功能的设计模式。这就像给你的房子装修，不用推倒重来，加个阳台、换个壁纸就能让它焕然一新。
在JS里，装饰器本质上就是一个函数，它可以接收被装饰的类、方法、属性或参数作为参数，然后返回一个新的类、方法、属性或参数（也可以不返回，直接修改原对象）。
二、装饰器的基本语法（还没入门的看这里）
先来个最简单的例子：
function log(target, name, descriptor) {
console.log(`Method ${name} was called.`);
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
console.log(`Arguments: ${args}`);
const result = originalMethod.apply(this, args);
console.log(`Result: ${result}`);
return result;
};
return descriptor; // 别忘了返回 descriptor，否则装饰器就失效了
}
class MyClass {
@log
add(a, b) {
return a + b;
}
}
const myInstance = new MyClass();
myInstance.add(2, 3);这段代码中，@log 就是一个装饰器，它装饰了 MyClass 的 add 方法。当 add 方法被调用时，log 装饰器会先执行，打印一些信息，然后再执行原始的 add 方法。
三、应用顺序：先来后到，可不是按颜值排队
重头戏来了！当一个类或者方法被多个装饰器修饰时，它们的执行顺序是怎样的呢？答案是：从下往上，从右往左。
这句话怎么理解？咱们用代码说话：
function first(target, name, descriptor) {
console.log("First decorator executed");
return descriptor;
}
function second(target, name, descriptor) {
console.log("Second decorator executed");
return descriptor;
}
class MyClass {
@first
@second
add(a, b) {
return a + b;
}
}
const myInstance = new MyClass();
myInstance.add(2, 3);运行这段代码，你会发现控制台的输出是：
Second decorator executed
First decorator executed看到了吧？@second 在 @first 的下面，所以它先执行。这就是“从下往上”的含义。
再来看一个更复杂的例子，涉及到类装饰器、方法装饰器和参数装饰器：
function classDecorator(target) {
console.log("Class decorator executed");
return target;
}
function methodDecorator(target, name, descriptor) {
console.log("Method decorator executed for " + name);
return descriptor;
}
function parameterDecorator(target, name, index) {
console.log(`Parameter decorator executed for ${name} at index ${index}`);
}
@classDecorator
class MyClass {
constructor(@parameterDecorator x: number, public y: number) {
this.y = y;
}
@methodDecorator
add(a: number, b: number) {
return a + b;
}
}
const myInstance = new MyClass(1, 2);
myInstance.add(3, 4);输出结果：
Parameter decorator executed for constructor at index 0
Method decorator executed for add
Class decorator executed这个例子说明：
- 参数装饰器优先于方法装饰器和类装饰器执行。
- 方法装饰器优先于类装饰器执行。
总结一下，装饰器的应用顺序可以用这张表来概括：
| 装饰器类型 | 执行顺序 |
|---|---|
| 参数装饰器 | 最先执行，从左到右 |
| 方法/属性装饰器 | 其次执行，从下到上 |
| 类装饰器 | 最后执行 |
四、求值策略：别急，一个一个来
求值策略是指装饰器何时被执行。在 JavaScript 中，装饰器是在类定义时立即求值的，而不是在类实例化时。这意味着，无论你是否创建了类的实例，装饰器都会被执行。
function logClass(target) {
console.log("Class decorated!");
}
@logClass
class MyClass {
constructor() {
console.log("Class instantiated!");
}
}
// 即使没有创建 MyClass 的实例，"Class decorated!" 也会被打印这个特性非常重要，因为它决定了你可以在装饰器中做哪些操作。例如，你可以在装饰器中修改类的原型，添加静态属性，或者注册类到某个全局管理器中。
五、实战演练：几个小例子让你彻底掌握
光说不练假把式，咱们来几个实际的例子，看看装饰器到底能干些啥：
1. 记录方法执行时间
function time(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = async function (...args) {
const start = performance.now();
const result = await originalMethod.apply(this, args);
const end = performance.now();
console.log(`Method ${name} took ${end - start}ms`);
return result;
};
return descriptor;
}
class MyService {
@time
async fetchData() {
// 模拟耗时操作
await new Promise(resolve => setTimeout(resolve, 1000));
return "Data fetched!";
}
}
const service = new MyService();
service.fetchData();这个例子中，@time 装饰器可以记录 fetchData 方法的执行时间，方便你进行性能分析。
2. 权限验证
function authorize(role) {
return function (target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
const userRole = this.getUserRole(); // 假设有一个方法可以获取用户角色
if (userRole !== role) {
throw new Error("Unauthorized");
}
return originalMethod.apply(this, args);
};
return descriptor;
};
}
class MyController {
getUserRole() {
return "admin"; // 模拟获取用户角色
}
@authorize("admin")
deleteUser(userId) {
console.log(`User ${userId} deleted`);
}
}
const controller = new MyController();
controller.deleteUser(123); // 只有当用户角色为 "admin" 时，才能执行 deleteUser 方法这个例子中，@authorize 装饰器可以进行权限验证，只有当用户拥有指定的角色时，才能执行被装饰的方法。
3. 自动绑定 this
function autobind(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
return originalMethod.apply(this, args);
};
return descriptor;
}
class MyComponent {
constructor() {
this.message = "Hello";
}
@autobind
handleClick() {
console.log(this.message); // 确保 this 指向 MyComponent 实例
}
render() {
const button = document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", this.handleClick); // 没有 autobind，this 指向 button
document.body.appendChild(button);
}
}
const component = new MyComponent();
component.render();这个例子中，@autobind 装饰器可以自动绑定 this，确保方法在任何情况下都能访问到正确的 this 上下文。
六、注意事项：别踩坑里了
- 类型声明： 装饰器是 TypeScript 的特性，虽然 Babel 也可以支持，但最好还是用 TypeScript 来开发，可以获得更好的类型检查和代码提示。
- 兼容性： 装饰器目前还是 Stage 3 的提案，虽然主流浏览器都已经支持，但为了兼容旧版本浏览器，可能需要使用 Babel 进行转译。
- 过度使用： 装饰器很强大，但不要滥用。过度使用装饰器可能会导致代码难以理解和维护。
七、总结：装饰器，你的代码魔术师
装饰器是一种非常强大的工具，可以让你以一种优雅的方式扩展和修改类的行为。掌握了装饰器的应用顺序和求值策略，你就可以更好地利用它来编写简洁、可维护的代码。
记住，装饰器就像一个魔术师，可以给你的代码带来意想不到的效果。但是，在使用它之前，一定要先了解它的原理和限制，避免踩坑。
好了，今天的讲座就到这里。希望大家能够喜欢，并在实际项目中灵活运用装饰器，让你的代码更加优雅和强大！如果还有什么疑问，欢迎随时提问。下次再见！