ES7 Decorator 是 JavaScript 中的一种语法糖方法，它可以在类、属性、方法上动态地添加修改行为。这为前端开发者提供了一种灵活、简洁的方式来扩展现有代码，并且它在 Angular、React、Vue 等前端框架中已被广泛应用。这篇文章将详细介绍 ES7 Decorator 的语法和使用。
Decorator 的语法
Decorator 是一个函数，它以 @ 符号作为前缀，紧跟着修饰的内容。Decorator 的语法如下：
@expression
其中，expression 表示一个 Function，通常是传入一个参数（被修饰的对象）并且返回一个新的被修饰后的对象。
当使用 Decorator 修饰一个类或者某个类的方法时，它会反映在该类或方法的实例中，并可通过 this 调用。
Decorator 的使用
下面是一些常用的 Decorator，包括类装饰器、属性装饰器和方法装饰器。
类装饰器
类装饰器是用来修改类的行为的，它以类构造函数作为其唯一参数。一个简单的类装饰器的示例：
function testDecorator(target) {
target.isTestable = true;
}
@testable
class MyTestableClass {
// ...
}这个例子中，@testable装饰器可以修改类的行为，然后在实例化 MyTestableClass 时，这些行为将被反映在实例中。
属性装饰器
属性装饰器是用来修饰类的属性的。属性装饰器可以看作包裹在属性声明前面的修饰器函数。一个常用的属性装饰器的示例：
// javascriptcn.com 代码示例
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
}
class MyClass {
@readonly
prop = 123;
}这个例子中，@readonly装饰器可以防止 MyClass 实例中的 prop 属性被重新赋值。
方法装饰器
方法装饰器是用来修饰类的方法的。方法装饰器可以看作包裹在方法声明前面的修饰器函数。一个常用的方法装饰器的示例：
// javascriptcn.com 代码示例
function log(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args) {
console.log(`Called ${name} with`, args);
return originalMethod.apply(this, args);
};
return descriptor;
}
class MyClass {
@log
add(x, y) {
return x + y;
}
}
const obj = new MyClass();
console.log(obj.add(5, 10));这个例子中，@log装饰器会在调用 MyClass 的 add 方法时记录参数列表，并在控制台中打印出来。
Decorator 的注意事项
虽然 Decorator 的使用非常灵活和方便，但也存在一些需要注意的点，如下：
- Decorator 返回的对象必须和修饰前的对象具有相同的结构；
- Decorator 必须要在声明阶段，即在类、属性或者方法声明前声明，否则将无效。
总结
ES7 Decorator 是 JavaScript 中的一种语法糖方法，它可以在类、属性、方法上动态地添加修改行为。它提供了灵活、简洁的方式来扩展现有代码。
在实际应用中，Decorator 的使用可以使代码更加清晰、简洁和易于维护。但是需要注意 Decorator 的使用要在修饰前声明，同时返回的对象与修饰前的对象具有相同的结构。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a56b27d4982a6ebcac1b9