在前端开发中，代码优美可读性高是一件非常重要的事情。在 ES6 发布引领时代的今天，过渡到 ES7 不仅扩展了语言的能力，更重要的是给我们带来了一些代码优美的方式，其中一个是装饰器（Decorator）。
什么是装饰器？
装饰器是一种特殊类型的声明，它可以被附加到类、方法、属性或参数上，来修改类的行为。该提案还在进行中，目前的版本是在 TC39 委员会，在 2018 年 02 月 13 日也发布了一个新版本（v2）。
装饰器的语法
装饰器的语法是一个函数或一个类前面加上 @ 符号，例如：
----------- ----- ------- - -
下面是一个简单的装饰器例子：
----------- ----- ------- - -- --- - -------- ------------------ - ---------------- - ----- -
装饰器的分类
在 ES7 中，装饰器分为类装饰器和方法装饰器两种。
类装饰器
类装饰器可以在类声明之前声明，被用来监视、修改或替换类定义，如下：
----------- ----- ------- - -- --- - -------- ------------------ - -- -------- -
方法装饰器
方法装饰器可以用来监视、修改或替换方法定义，如下：
----- ------- - --------- -------- - - - -------- ---------------- ----- ----------- - ------------------- - ------ ------ ----------- -
装饰器的使用场景
Mixin
本质上，Mixin 就是一种将多个类的功能组合在一起创建一个类的方式。我们可以使用装饰器来实现 Mixin，如下：
-------- -------------- -
------ -------- -------- -
------------------------------- --------
-
-
----- --- - -
----- - ------------------ -
-
-----------
----- ------- - -
--- --- - --- ----------
---------- -- -----类属性
类属性是指每个实例对象都拥有的属性。有时我们希望类有一些默认的属性，然而在传统的类中，这样做非常困难。装饰器可以为类属性提供一个简单的解决方案，如下：
-------- ----------- ----- ----------- -
--- -------- - -----------------
---------------- - -------- -- -
-------------------- --------- ------ -----------
------ -------------------- -----------
--
------ -----------
-
----- ------- -
----
------ ------ -- -
------ - - --
-
-
-------------- --- -- -------- ----- ------ --- --总结
通过装饰器，我们可以实现一些有趣的功能来使我们的代码更加优美，例如 Mixin、类属性等。当然，装饰器还在提案阶段，并未正式成为 ES7 的一部分，但这并不影响我们在编写代码的时候使用它，为我们的代码增加更多的优美和灵活性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649bd82c48841e9894899e57