装饰器（Decorator）是一种新的语法特性，它的目的是让开发人员能够更加方便地向已有代码中添加新的功能或行为。在 JavaScript 中，装饰器是通过 ES7 的提案而引入的，它是一种非常强大的技术，可以帮助开发人员快速地搭建复杂的 Web 应用程序。
在本文中，我们将讨论如何使用 ES7 添加装饰器，并解释装饰器的工作原理。我们还将提供一个完整的例子以帮助您更好地理解如何使用装饰器。
什么是装饰器？
装饰器是一种函数，可以用来修改类或方法的行为。换句话说，装饰器是一种元编程技术，它允许开发人员在运行时修改代码的行为，而不用直接修改代码本身。
在 JavaScript 中，装饰器是通过 ES7 提案而引入的。装饰器可以用于类、方法、属性等，它们的语法类似于注释，但比注释更强大。
如何使用装饰器？
在 ES7 中，您可以使用 @ 符号来添加装饰器。例如，您可以使用 @readonly 装饰器来将类的属性设置为只读：
----- ------ - --------- ------ - ------ -------------- ------------- - -
在这个例子中，@readonly 装饰器用于修改 name 方法的行为。它将该方法设置为只读，即在调用方法后无法修改该方法的返回值。
您也可以使用多个装饰器。例如，您可以使用 @readonly 和 @validate 装饰器来修改类的属性：
----- ------ - --------- --------- ------ - ------ -------------- ------------- - -
在这个例子中，@readonly 装饰器修改 name 方法的行为，将其设置为只读。而 @validate 装饰器用于在 name 方法被调用前，对该方法的参数进行验证。
装饰器的工作原理
在 JavaScript 中，装饰器是通过函数来实现的。这些函数可以接受一个参数，该参数是要修改的类或方法。在这个函数中，您可以添加任意的 JavaScript 代码，来修改代码的行为。
下面是一个示例函数，该函数用于将类的属性设置为只读：
-------- ---------------- ----- ------------ ------------------- - ------ ------ ----------- -
在这个例子中，我们定义了一个函数 readonly，该函数接受三个参数：target、name 和 descriptor。其中，target 是要修改的类，name 是要修改的属性名，descriptor 是该属性的描述符。
在函数中，我们将 descriptor 的 writable 属性设置为 false，这样就能够将属性设置为只读。
完整的示例
下面是一个完整的示例，该示例使用装饰器来修改类的行为。在这个例子中，我们定义了一个 @log 装饰器，用于记录类的方法被调用的次数：
-------- ----------- ----- ----------- -
----- -------- - -----------------
-- ------- -------- --- ----------- -
---------------- - ----------------- -
--------------------- --------- --- ---------
------ -------------------- ------
-
-
------ -----------
-
----- ---------- -
----
--------- -
------ - - --
-
-
----- ---- - --- -------------
--------------- -- -------- -------- --- ------在这个例子中，我们定义了一个 @log 装饰器。该装饰器会将类的方法的调用次数记录到控制台中。在 Calculator 类中，我们使用 @log 装饰器来修改 square 方法的行为。在该方法被调用时，我们将记录该方法被调用的次数。
总结
在本文中，我们介绍了如何使用 ES7 的装饰器来修改类或方法的行为。我们提供了一个完整的示例，来帮助您更好地理解装饰器的工作原理。如果您想进一步了解装饰器，请参考官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64747ce1968c7c53b01da7f7