在 JavaScript 中，我们经常需要为一个类或对象添加新的方法或属性。ES7 引入了 decorator 的概念，可以方便地给类动态添加方法。本文将详细介绍如何使用 decorator 添加方法，并给出示例代码。
decorator 简介
decorator 是一种装饰器模式，可以通过在类或方法前面添加 @ 符号来使用。它是一个函数，接受三个参数：target、name 和 descriptor。其中，target 表示要修饰的类或对象，name 表示要修饰的属性名，descriptor 表示属性的描述对象。decorator 可以用来修改类或对象的行为，比如添加新的方法、修改方法的实现等。
给 class 添加方法
我们可以使用 decorator 给一个 class 添加新的方法，比如下面的例子：
-------- ----------------- -
-------------------------- - ---------- -
----------------- -- - --- ----------
-
-
----------
----- ------- --
--- ------- - --- ----------
-------------------- -- ------- -- - --- -------在上面的例子中，我们定义了一个 addMethod 的 decorator，它接受一个 target 参数，表示要修饰的类。在 decorator 中，我们通过修改 target.prototype，给类添加了一个新的方法。使用 @addMethod 来修饰 MyClass 类，就可以在实例化后调用 newMethod 方法。
给 class 的方法添加修饰器
我们也可以使用 decorator 来修饰 class 的方法，比如下面的例子：
-------- ----------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
-------------------- ------- ---- ------------ ------
----- ------ - -------------------- ------
------------------- -- ---------- --------
------ -------
--
------ -----------
-
----- ------- -
----
-------------- ----- -
------ ---- - -----
-
-
--- ------- - --- ----------
------------------- --- -- ---------- -------- ---- ---------- --- --------- -- --------- -在上面的例子中，我们定义了一个 log 的 decorator，它接受三个参数：target、name 和 descriptor。在 decorator 中，我们首先保存了原来的方法实现，然后修改了 descriptor.value，替换成一个新的函数。这个新的函数在调用原来的方法前后，分别输出了日志信息。最后，我们返回修改后的 descriptor 对象，表示对原来的方法进行了修饰。
使用 @log 来修饰 MyClass 的 myMethod 方法，就可以在调用方法前后输出日志信息。
总结
通过 decorator，我们可以方便地给 class 动态添加方法，或者修饰 class 的方法。使用 decorator 可以让代码更加清晰、易读、易维护。在实际开发中，我们可以使用 decorator 来实现各种功能，比如日志、缓存、权限控制等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6610e102d10417a222191b5c