在前端开发中，设计模式是一种核心概念，它可以减少代码的复杂度、提高代码的可维护性。装饰器模式是设计模式中的一种，它的思想是在不改变原有对象的结构的情况下，动态地给对象增加新的功能。在 ECMAScript 2021 （也就是 ES12）中，我们可以使用 Decorator 来实现 JavaScript 中的装饰器模式。
什么是 Decorator
Decorator 是 ECMAScript 2021 的一项新特性，它是一种语法糖，可以用来动态地修改类和类的方法。Decorator 的作用是在不修改原有类和类的方法源码的前提下，对其进行包装和扩展，以达到给类和类的方法增加新功能的目的。
Decorator 可以被应用于类、类的属性和方法。它是一种方便，可读性强，易于维护的代码实现。
如何使用 Decorator 实现装饰器模式
装饰器模式的核心是将对象进行包装，通过多个装饰器的组合，实现复杂功能的需求，从而提高代码的可维护性和重用性。在 JavaScript 中，Decorator 可以实现装饰器模式，具体实现方法如下：
给类添加 Decorator
function log(target) {
console.log('Class', target)
}
@log
class Foo {}上面的代码中，我们定义了一个 log 函数，它接收一个类作为参数，打印这个类的信息。然后，我们通过 @log Decorator 添加 log 的行为到 Foo 类中。
给类的方法添加 Decorator
-- -------------------- ---- ------- -------- ---------------- ----- ----------- - ------------------- - ----- ------ ---------- - ----- --- - --------- ----- -- -
上面的代码中，我们定义了一个 readonly 函数，它接收类、属性名和方法描述符作为参数，将该方法设置为只读，不能被更改。再通过 @readonly Decorator 给 Foo 类的 bar 方法添加行为。
Decorator 的实例
下面是一个使用 Decorator 实现装饰器模式的例子，它实现了对一篇博客的评论、点赞和分享功能的扩展。
-- -------------------- ---- -------
-------- ------------------- -
------------------------ - ---------- -
---------------- ------- -- ------
-
-
-------- ---------------- -
--------------------- - ---------- -
----------------- --- ------
-
-
-------- ----------------- -
---------------------- - ---------- -
------------------ --- ------
-
-
------------
---------
----------
----- -------- --
----- ---- - --- ----------
-------------- -- --- ------- -- ----
----------- -- ---- --- ----
------------ -- ----- --- ----在上面的代码中，我们定义了三个 Decorator，分别是 withComment、withLike 和 withShare，它们都是用来扩展 BlogPost 类的行为，包括新增评论、点赞和分享功能。通过 @withComment、@withLike 和 @withShare Decorator 给 BlogPost 类添加这些行为，然后实例化 BlogPost 类，并调用这些行为方法。
总结
本文中，我们介绍了 ECMAScript 2021 中的 Decorator 特性，它能够实现 JavaScript 中的装饰器模式，通过简单的语法糖，实现对类和类的方法的动态包装和扩展，从而提高代码的可维护性和重用性。我们还通过一个例子来演示了如何使用 Decorator 实现对一篇博客的评论、点赞和分享功能的扩展。学习 Decorator 不仅能够完善 JavaScript 中的设计模式知识体系，也是一种提高开发效率和代码可维护性的实用技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9b2adf6b2d6eab34e52f4