ES11 (2020) 中引入了装饰器（Decorator) 声明，可以让我们在函数和类的基础上增强功能，同时还可以简化代码和提高可读性。本文将深入探讨装饰器的使用和实现细节，希望对前端开发者有所帮助。
什么是装饰器？
装饰器（Decorators) 是一个函数或类，它接收一个函数或类作为参数，并在不修改该函数或类的原主体代码的情况下，为该函数或类添加功能。换句话说，装饰器是一个包装器，它可以增强或修改原有的函数或类。
装饰器的应用场景
- 统计函数或类的执行时间
- 为函数或类添加缓存功能
- 为函数或类添加日志功能
- 为函数或类添加验证功能
- 等等
函数装饰器
函数装饰器是一个函数，它接收一个函数作为参数，并返回一个新函数。函数装饰器通常用于修改函数的行为，例如统计调用次数，控制访问权限等。
下面是一个简单的例子：
// javascriptcn.com 代码示例
function log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`Calling ${name} with`, ...args);
const result = original.apply(this, args);
console.log(`Called ${name} returned`, result);
return result;
};
return descriptor;
}
class Calculator {
@log
add(a, b) {
return a + b;
}
}
const calculator = new Calculator();
calculator.add(1, 2);
// output:
// Calling add with 1 2
// Called add returned 3上面的代码中，我们定义了一个名为 log 的函数装饰器。它接收三个参数：target 表示被装饰的函数所属的类，name 表示被装饰的函数的方法名，descriptor 表示被装饰函数的描述符。
在 log 装饰器的实现中，我们首先获取原有的函数，然后对该函数进行重写。在新的函数中，我们先打印一条调用日志，然后调用原有函数，并记录结果。最后，再打印一条返回结果的日志，并返回结果。
为了在 Calculator 类的 add 方法上应用 log 装饰器，我们使用了 @ 符号，紧接着写上装饰器的名称。这样可以让装饰器作为一个修饰符，加在函数的定义前面。
类装饰器
类装饰器是一个类，它可以接收一个类作为参数，并返回一个函数或其他类型的数据。类装饰器通常用于修改或替换类的定义，或向类添加新成员或方法。
下面是一个简单的例子：
// javascriptcn.com 代码示例
function provide(config) {
return function(target) {
target.$inject = config.$inject;
};
}
@provide({
$inject: ['userService']
})
class UserComponent {
constructor(userService) {
this.userService = userService;
}
render() {
// ...
}
}
console.log(UserComponent.$inject); // ['userService']上面的代码中，我们定义了一个名为 provide 的类装饰器。它接收一个名为 config 的配置对象，并返回一个函数。在该返回函数中，我们给被装饰的类 target 添加了一个 $inject 属性，并将其赋值为 config.$inject。最后，我们把装饰器用于 UserComponent 类，同时传入 $inject 配置。
在 UserComponent 类中，我们使用了 $inject 属性来标记依赖。这就为依赖注入提供了便利，我们只需要通过 $inject 数组来声明依赖关系，而不是在构造函数中手动声明。
参数装饰器
参数装饰器是一个函数，它接收三个参数：target 表示被装饰的函数所属的类，name 表示被装饰的函数的方法名，index 表示所修饰的参数在函数的参数列表中的位置。参数装饰器用于修改被装饰函数的其它参数属性。
下面是一个简单的例子：
// javascriptcn.com 代码示例
function Required(target, name, index) {
const params = target.params || [];
params[index] = {
required: true
};
target.params = params;
}
class UserController {
static getUsers(@Required pageNo, @Required pageSize) {
// ...
}
}
console.log(UserController.params);
// [ { required: true }, { required: true } ]上面的代码中，我们定义了一个名为 Required 的参数装饰器。在被装饰的函数中，我们使用 @ 符号把装饰器用于参数对象上。在 Required 装饰器的实现中，我们将所有带 required 标识的参数，添加到参数数组中。
总结
装饰器为开发中的诸多问题提供了解决方案，能够提高代码的灵活性和可维护性，同时也增强了类和函数的功能。我们可以使用装饰器来实现各种功能，比如日志打印、校验、缓存和依赖注入等等。需要注意的是，装饰器虽然是很实用的功能，但在实践中也需要遵守一些约定，以免引起代码或功能的混乱。
最后，希望本文能够帮助大家更好地理解和使用装饰器，从而提高前端开发的工作效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6b1eff6b2d6eab3f41b37