修饰符随 Angular 2+ 变得流行起来。在 Angular 中，是 TypeScript 带来了修饰符，不过修饰符会在今年晚些时间更新为 ES2017 的一部分。我们来看看修饰符是什么，以及如何使用它们可以让代码变得更容易理解。

什么是修饰符?

用最简单的形式来说，修饰符是用一段代码包装另一段代码的方式 —— 字面上的“修饰”。

这个概念你以前可能听说过，就是“功能组合”，或者“高阶函数”。

分享之前我还是要推荐下我自己的前端学习群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料，送给大家，欢迎初学和进阶中的小伙伴

怎么使用 JavaScript 修饰符？

修饰符使用一个在 ES2017 中定义的特殊语法，在被修饰的代码前放置一个 @ 开头的符号。

注意:在写这篇文章的时候，修饰符已经处于“ 第 2 阶段草案 ”，这表示它们肯定会被最终完成，但目前仍然有可能发生变化。

为什么使用修饰符？

修饰符的不同类型

类成员修饰符

属性修饰符用于类的某个成员 —— 不管它们是属性、方法、getter 还是 setter。

这类修改符函数调用时会传入三个参数：

target(目标) – 成员所在的类。

name(名称) – 类成员的名称。

descriptor(描述符) – 成员描述符。本质上是传入 Object.defineProperty 的对象。

典型的应用示例是 @readonly。现在起来很简单：

只需要通过设置属性描述符的 “writable” 标记为 false。

然后在类属性上像这样使用：

然而我们再做得好一些。我们可以用不同的行为来改变修饰功能。比如，记录所有输入和输出：

这段代码使用新的方法取代了原来的方法，新方法会记录参数，调用原来的方法，然后记录原有方法的输出。

注意我们使用了 展开运算符 来自动从传入的所有参数构建数组，这种新语法用来代替以前的arguments值。

用法如下：

你会发现我们不得不使用一个有点好笑的语法执行被修饰的方法。这种方法在整篇文章都有使用。不过总的来说， apply 函数能让你调用函数，指定 this 以及调用函数时传入的参数。

我们来进行一点改进，让修饰符处理一些参数。比如你下面这样重写 log 修饰符：

现在它变得更复杂了，但是拆解开来就容易解理了：

一个函数， log，需要一个参数 ： name

这个函数返回另一个 本身是修饰符 的函数。这与之前的 log 修饰符相同，除了它要使用来自外部函数的 name 参数。

像下面这样使用：

马上我们可以看到，我们提供的标签让我们可以在日志中很容易识别需要的内容。

这是因为 log('some tag') 调用时，JavaScript 运行时立即对其进行运算，然后从 sum 方法的修饰符得到响应。

类修饰符

回到我们记录日志的示例，我们来写一个修饰符记录构造函数的参数：

这里我们接受一个类作为参数，然后返回一个新的函数来充当构造函数。它只是单纯地记录参数和构造函数通过这些参数构造出来的新实例。

比如：

我们可以看到构造 Example 类实例时会记录提供给它的参数，而且构造出来的值确实是 Example 的实例。正是我们想要的。

向类修饰符传递参数与向类成员修饰符传递参数一样：

文章到这里就结束了，web前端学习的可以来我的群，群里每天都有对应资料学习：524262608，欢迎初学和进阶中的小伙伴。

web前端学习方法经验可以关注我的微信公众号：‘学习web前端’，每天一篇案例源码或经验分享，关注后回复‘给我资料’可以领取一套完整的学习视频