JavaScript 装饰器：增强代码优雅性与可维护性的利器250

JavaScript 装饰器 (Decorators) 是一种强大的语法糖，可以用来修改或增强已存在的类、方法或属性。它们提供了一种简洁且可读性更强的方式来添加额外功能，例如日志记录、权限控制、缓存机制等，而无需修改原有代码的结构。尽管装饰器还不是 JavaScript 语言的正式标准一部分（虽然Stage 3提案已经很久了，但浏览器原生支持还不完善），但 Babel 等转译器已经提供了很好的支持，让开发者可以提前体验并应用这项强大的特性。

在深入了解 JavaScript 装饰器之前，我们先来思考一个常见的问题：如果我们需要为多个类或方法添加相同的逻辑，例如日志记录，我们该如何处理？传统的做法可能是创建一个工具类，并在每个类或方法中手动调用该工具类的函数。这种做法不仅冗余，而且难以维护。如果需要修改日志记录的逻辑，就需要修改所有调用该工具类的代码。而装饰器则提供了一种更优雅的解决方案。

JavaScript 装饰器使用 `@` 符号来声明，它可以放置在类声明、方法声明或属性声明之前。装饰器本身就是一个函数，它接收被装饰的目标作为参数，并可以修改或增强该目标。让我们来看一个简单的例子：一个用于记录方法执行时间的装饰器：```javascript
function logExecutionTime(target, name, descriptor) {
const originalMethod = ;
= function (...args) {
const startTime = ();
const result = (this, args);
const endTime = ();
(`Method ${name} took ${endTime - startTime} ms`);
return result;
};
return descriptor;
}
class MyClass {
@logExecutionTime
myMethod(a, b) {
let sum = 0;
for (let i = 0; i < 100000000; i++) {
sum += i;
}
return a + b;
}
}
const myInstance = new MyClass();
((1, 2));
```

在这个例子中，`logExecutionTime` 函数是一个装饰器。它接收三个参数：`target` (被装饰的目标，通常是类或类的原型)，`name` (方法名)，`descriptor` (方法描述符，包含方法的属性，例如 `value`，`writable` 等)。装饰器通过修改 `` 来包裹原有方法，添加了记录执行时间的逻辑。

装饰器还可以用于类本身： ```javascript
function logClassCreation(constructor) {
(`Class ${} created`);
}
@logClassCreation
class AnotherClass {}
const anotherInstance = new AnotherClass();
```

在这个例子中，`logClassCreation` 装饰器在类创建时被执行，并打印一条日志信息。

除了简单的函数装饰器，我们还可以使用工厂函数来创建更复杂的装饰器： ```javascript
function cacheResult(maxAge = 60000) { //缓存结果，默认缓存60秒
return function(target, name, descriptor) {
const originalMethod = ;
let cache = {};
let lastUpdate = 0;
= function(...args) {
const key = (args);
if (cache[key] && () - lastUpdate < maxAge) {
return cache[key];
} else {
const result = (this, args);
cache[key] = result;
lastUpdate = ();
return result;
}
};
return descriptor;
}
}
class CacheClass {
@cacheResult(10000) //缓存10秒
expensiveMethod(arg) {
('Computing expensive result...');
return arg * 2;
}
}
const cacheInstance = new CacheClass();
((5)); //计算
((5)); //从缓存读取
```