在 ES7 中使用 decorator 改变方法类行为
随着前端技术的不断发展，越来越多的新特性被引入到 JavaScript 中，而其中一种特性就是 decorator。从 ES7 开始，decorator 正式被包含在 ECMAScript 规范中，并且在许多框架和库中被广泛使用。本文将介绍 decorator 的概念、用途以及如何在 ES7 中使用 decorator 来改变方法类行为。
什么是 decorator？
Decorator 是一种特殊类型的声明，可以被附加到类声明、方法、属性或参数上，以修改类的行为。我们可以将 decorator 视为一种特殊的装饰器，它可以在不修改源代码的情况下为类和其方法添加新的功能。
为什么要使用 decorator？
使用 decorator 可以方便地为类添加一些额外的功能，例如日志记录、参数验证、性能分析等。此外，使用 decorator 还可以使代码更加模块化和可重用，提高代码的可读性和可维护性。
如何使用 decorator？
在 ES7 中，我们可以使用 @ 符号来应用一个 decorator。对于类的 decorator，它会被应用到整个类上，对于方法的 decorator，它会被应用到特定方法上。下面是使用 decorator 的示例代码：
-- -------------------- ---- -------
-- ----- ---------
-------- ----------- -
-------------------------
-
-- --- ---------
----
----- ------- --
-- ------ ---------
-------- --------------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
----- -------- - ---------------------
-- ------------- -
---------- - ---
-
-- ----------------------- -
---------------- -- ------ -----------------
-------------------- - -------------------- ------
- ---- -
-------------------- ----- ------------
-
------ ---------------------
--
------ -----------
-
-- ---- ---------
----- ---------- -
--------
------ -- -
------ - - --
-
-上述代码中，我们定义了两个 decorator：log 和 memoize。log 用于将一个日志输出到控制台，而 memoize 则可以将方法的结果缓存起来，以提高方法的性能。@log 和 @memoize 分别应用于 MyClass 和 Calculator.add 方法，使它们拥有了额外的功能。
decorator 是如何工作的？
在应用 decorator 时，它会被传递给一个特殊的工厂函数，该函数将返回一个新的类或方法。在上述代码示例中，log 和 memoize 都返回了被修改后的类或方法，以便它们拥有了额外的功能。下面是 memoize decorator 的详细解释：
target: 被装饰的方法所属的类。name: 被装饰的方法的名称。descriptor: 被装饰的方法的属性描述符。
在 memoize decorator 中，我们首先保存了原始方法的引用，然后重写了方法，以便它可以将结果存储在缓存中。最后，我们返回了新的方法（即更改后的方法描述符），以便它可以替换掉原始方法。
总结
通过使用 decorator，在不修改源代码的情况下，我们可以方便地为类和方法添加新的功能。使用 decorator 可以使代码更加模块化和可重用，提高代码的可读性和可维护性。在 ES7 中，我们可以使用 @ 符号来应用一个 decorator。在定义 decorator 时，我们需要将其传递给一个特殊的工厂函数，该函数将返回一个新的类或方法，以便它们拥有了额外的功能。如果您想要进一步了解 decorator 的用法和细节，请参考官方文档。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64715877968c7c53b0f3af06