1. 什么是装饰器？
装饰器是一种对已有代码进行修改的设计模式，可以在不改变原始函数或对象属性的情况下，增加、删除或修改它们的行为。装饰器是一种语法糖，它是一个函数或类，它可以接收一个函数或类作为参数。在 JavaScript 中，装饰器通常与高阶函数结合使用。装饰器可以添加或修改函数或类的属性、方法或属性的特性，以及用于 AOP（面向切面编程）。
2. 装饰器在 JavaScript 中的使用
在 JavaScript 中，装饰器通过 @ 符号应用于函数或类上。它可以在函数或类定义前使用。装饰器使用以下语法：
@decorator
class MyClass {}
或者
@decorator
function myFunc() {}
其中，decorator是一个函数或类，它可以修改其下面的类或函数的行为。
2.1 装饰器的应用
2.1.1 类装饰器
类装饰器可以添加属性和方法，以及修改类的原型和静态属性。例如：
function log(target) {
target.prototype.log = function() {
console.log(this.message);
}
}
@log
class MyClass {
constructor(message) {
this.message = message;
}
}
let myClass = new MyClass('Hello World!');
myClass.log(); // Hello World!
在上面的例子中，我们定义了一个装饰器函数 log，它添加了一个新方法 log，用于输出实例属性 message 的值。在 MyClass 上使用 @log 装饰器之后，MyClass 实例将具有 log 方法。
2.1.2 方法装饰器
方法装饰器可以修改方法的行为。例如：
function enumerable(value) {
return function(target, key, descriptor) {
descriptor.enumerable = value;
return descriptor;
}
}
class MyClass {
@enumerable(false)
myMethod() {
console.log('Hello World!');
}
}
let myClass = new MyClass();
console.log(Object.getOwnPropertyDescriptor(myClass, 'myMethod').enumerable); // false
在上面的例子中，我们定义了一个装饰器函数 enumerable，它接收一个参数 value，用于设置方法 myMethod 是否可枚举。在 MyClass 的 myMethod 上使用 @enumerable(false) 装饰器之后，Object.getOwnPropertyDescriptor 方法获取到的属性描述符中 enumerable 的值为 false。
2.1.3 属性装饰器
属性装饰器可以修改属性的特性。例如：
function configurable(value) {
return function(target, key) {
Object.defineProperty(target, key, {
configurable: value
});
}
}
class MyClass {
@configurable(false)
myProperty = 'Hello World!';
}
let myClass = new MyClass();
delete myClass.myProperty; // TypeError: Cannot delete property 'myProperty' of [object Object]
在上面的例子中，我们定义了一个装饰器函数 configurable，它接收一个参数 value，用于设置属性 myProperty 是否可删除。在 MyClass 的 myProperty 上使用 @configurable(false) 装饰器之后，我们尝试使用 delete 操作符删除 myProperty 属性时，会抛出一个错误。
2.2 装饰器的实现
在 JavaScript 中，装饰器本质上是一个函数或类，它接收一个参数，可以是函数或类，并返回一个新的函数或类。
下面是一个简单的例子，用于说明装饰器的实现：
function log(target) {
return class extends target {
constructor(...args) {
super(...args);
console.log('log: ', args);
}
}
}
@log
class MyClass {
constructor(a, b) {
this.a = a;
this.b = b;
}
}
let myClass = new MyClass('Hello', 'World!');
console.log(myClass.a, myClass.b); // Hello World!
在上面的例子中，我们定义了一个装饰器函数 log，它接收一个参数 target，并返回了一个新的类，这个新类继承了原始的 MyClass，并且在构造函数中输出了传入参数的值。在 MyClass 上使用 @log 装饰器之后，我们创建了一个新的 MyClass 实例，并输出了它的实例属性 a 和 b 的值。
3. 总结
在 JavaScript 中，装饰器是一种对已有代码进行修改的设计模式，它提供了一种灵活的方式来增加、删除或修改函数或对象的行为。装饰器通过 @ 符号应用于函数或类上。类装饰器可以添加属性和方法，以及修改类的原型和静态属性。方法装饰器可以修改方法的行为。属性装饰器可以修改属性的特性。在实现中，装饰器本质上是一个函数或类，它接收一个参数，并返回一个新的函数或类。在 JavaScript 中，装饰器的使用越来越普遍，它可以帮助我们更好地管理代码，提高开发效率。