在前端开发中，代码耦合是一个常见的问题。当我们需要修改一个组件或函数时，可能会影响到其他部分的代码，导致不必要的错误和时间浪费。为了解决这个问题，ECMAScript 2021 引入了一个新特性：Decorator。
Decorator 是什么？
Decorator 是一种特殊的函数，可以用来修改类和类的属性。它可以在不改变原有代码的情况下，添加新的行为和功能。在 JavaScript 中，Decorator 使用 @ 符号来标识。
如何使用 Decorator？
使用 Decorator 非常简单。我们可以在类或类的属性前面添加 @ 符号，然后紧跟着一个函数或类。这个函数或类就是我们定义的 Decorator。
类 Decorator
类 Decorator 可以用来修改类的行为。下面是一个例子：
function log(target) {
console.log(target.name + ' is logged.');
}
@log
class MyClass {
static name = 'MyClass';
}在这个例子中，我们定义了一个名为 log 的 Decorator，它可以输出类的名称。然后，我们使用 @log 将这个 Decorator 应用到 MyClass 类上。当我们创建 MyClass 的实例时，就会看到这个输出：
MyClass is logged.
属性 Decorator
属性 Decorator 可以用来修改类的属性。下面是一个例子：
-- -------------------- ---- ------- -------- ---------------- ---- ----------- - ------------------- - ------ ------ ----------- - ----- ------- - --------- ------ ---- - ---------- -
在这个例子中，我们定义了一个名为 readonly 的 Decorator，它可以将类的属性设置为只读。然后，我们使用 @readonly 将这个 Decorator 应用到 MyClass 类的 name 属性上。当我们尝试修改 name 属性时，就会抛出一个错误：
Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
Decorator 的优势
使用 Decorator 可以带来很多好处，包括：
- 解耦合：使用 Decorator 可以将不同的代码分离开来，减少耦合性，使代码更容易维护和扩展。
- 可重用性：使用 Decorator 可以将相同的功能应用到不同的类或属性上，提高代码的可重用性。
- 可读性：使用 Decorator 可以使代码更加清晰和易读，减少代码的嵌套和复杂性。
总结
Decorator 是 ECMAScript 2021 引入的一个新特性，可以用来修改类和类的属性。使用 Decorator 可以解决代码耦合问题，提高代码的可重用性和可读性。在实际开发中，我们可以根据需求定义不同的 Decorator，来实现不同的功能和行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d458f95b1f8cacd6fac12