在 ES7 中，引入了一种新的语法特性——Decorator（装饰器），它可以让我们在类和类的属性上添加元数据，从而实现更加灵活和可扩展的编程方式。
Decorator 是什么？
Decorator 是一个函数，它可以接收一个或多个参数，并返回一个新的函数。在 ES7 中，我们可以使用 @ 符号来应用 Decorator，例如：
@decorator
class MyClass {}这里，@decorator 就是一个 Decorator，它会被应用到 MyClass 这个类上。
如何定义一个 Decorator？
可以通过下面的方式来定义一个 Decorator：
function decorator(target, name, descriptor) {
// do something
return descriptor;
}Decorator 接收三个参数：
- target：被装饰的目标对象，可以是一个类或者类的属性。
- name：被装饰的属性的名称，如果是装饰类，则为 undefined。
- descriptor：被装饰的属性的描述符，包含了属性的值、getter、setter 等信息。
在 Decorator 函数内部，我们可以对目标对象进行一些逻辑处理，例如添加属性、修改属性值等。最后，需要返回一个新的 descriptor 对象，用于替换原来的 descriptor。
Decorator 的应用场景
1. 类的装饰
通过 Decorator，我们可以在类定义时添加一些元数据，例如：
-- -------------------- ---- -------
-------- ----------- -
-------------------- - ------------- -
-----------------
--
-
----
----- ------- --
----- ------- - --- ----------
--------------------- -- -- -----这里，@log 就是一个 Decorator，它会在 MyClass 类上添加一个 log 方法。通过这种方式，我们可以在不修改原有类定义的情况下，扩展类的功能。
2. 属性的装饰
除了类的装饰，我们还可以通过 Decorator 对类的属性进行装饰。例如：
-- -------------------- ---- ------- -------- ---------------- ----- ----------- - ------------------- - ------ ------ ----------- - ----- ------- - --------- ---- - ---- - ----- ------- - --- ---------- ------------ - ---- -- --------- ------ -- ---- ---- -------- ------ -- ------ ------------
这里，@readonly 就是一个 Decorator，它会在 MyClass 类的 prop 属性上添加一个只读属性。通过这种方式，我们可以对类的属性进行限制，防止被修改。
3. 方法的装饰
除了属性的装饰，我们还可以通过 Decorator 对类的方法进行装饰。例如：
-- -------------------- ---- -------
-------- ----------- ----- ----------- -
----- -------- - -----------------
---------------- - ----------------- -
---------------------- --------
----- ------ - -------------------- ------
---------------------- -------
------ -------
--
------ -----------
-
----- ------- -
----
---------- -
---------------------
-
-
----- ------- - --- ----------
------------------- -- -- ---------- ---------------------- ----这里，@log 就是一个 Decorator，它会在 MyClass 类的 sayHello 方法上添加一个日志功能。通过这种方式，我们可以在不修改原有方法的情况下，对方法进行扩展。
总结
通过 Decorator，我们可以在不修改原有类定义的情况下，扩展类的功能，对类的属性和方法进行装饰和限制。Decorator 是一种非常灵活和可扩展的编程方式，可以让我们更加方便地实现复杂的业务逻辑。
以上就是 ES7 的 Decorator 用法的详细介绍，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65756148d2f5e1655de90626