在 ES2021 中，新增了一种功能：Class body 和 method decorators。这是一种强大的工具，可以让开发者更加方便地扩展和修改类的行为。在本文中，我们将详细介绍这个功能，并提供一些示例代码，帮助读者更好地理解如何使用它。
什么是 Class body 和 method decorators？
Class body 和 method decorators 是 ES2021 中新增的一种功能，它们被设计用于修改类及其方法的行为。Class body decorators 可以修改类本身的行为，而 method decorators 可以修改类的方法的行为。这些 decorators 是一种语法糖，可以让开发者更方便地扩展和修改类的功能。
如何使用 Class body 和 method decorators？
使用 Class body 和 method decorators 非常简单。我们只需要在类或方法前面添加一个 @ 符号，然后在后面跟上一个函数，这个函数就是我们自己定义的 decorator 函数。这个函数将接收一个参数，这个参数是被修饰的类或方法，我们可以在这个函数中修改这个类或方法的行为。
下面是一个示例代码：
// javascriptcn.com 代码示例
function classDecorator(target) {
// 修饰类本身
target.newProperty = 'new property';
target.prototype.newMethod = function () {
console.log('new method');
};
return target;
}
function methodDecorator(target, name, descriptor) {
// 修饰类的方法
const oldValue = descriptor.value;
descriptor.value = function () {
console.log(`Calling ${name} with`, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
}
@classDecorator
class MyClass {
constructor() {
this.property = 'old property';
}
@methodDecorator
oldMethod() {
console.log('old method');
}
}
const obj = new MyClass();
console.log(obj.property); // "old property"
console.log(obj.newProperty); // "new property"
obj.oldMethod(); // "Calling oldMethod with", []
// "old method"
obj.newMethod(); // "new method"在这个示例中，我们定义了两个 decorator 函数：classDecorator 和 methodDecorator。classDecorator 用于修饰类本身，而 methodDecorator 用于修饰类的方法。我们将这两个 decorator 应用于 MyClass 类和它的 oldMethod 方法，然后在控制台中输出 MyClass 的实例的属性和方法，可以看到我们成功地修改了 MyClass 的行为。
总结
Class body 和 method decorators 是 ES2021 中新增的一种功能，它们可以让开发者更方便地扩展和修改类及其方法的行为。使用这些 decorators 非常简单，只需要在类或方法前面添加一个 @ 符号，然后在后面跟上一个函数，这个函数就是我们自己定义的 decorator 函数。在这个函数中，我们可以修改类或方法的行为。这个功能可以提高开发效率，让代码更加清晰易懂。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657fb7b5d2f5e1655da92884