JavaScript 修饰符是什么，什么时候使用它们？

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

什么是修饰符?

用最简单的形式来说，修饰符是用一段代码包装另一段代码的方式 —— 字面上的“修饰”。
这个概念你以前可能听说过，就是“功能组合”，或者“高阶函数”。

怎么使用 JavaScript 修饰符？
修饰符使用一个在 ES2017 中定义的特殊语法，在被修饰的代码前放置一个 @ 开头的符号。
注意:在写这篇文章的时候，修饰符已经处于“ 第 2 阶段草案 ”，这表示它们肯定会被最终完成，但目前仍然有可能发生变化。

为什么使用修饰符？

修饰符的不同类型

类成员修饰符

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

有兴趣想学习web前端的可以来web前端qun“189394454”可以免费获取2018最新web前端学习资料。

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

1. target(目标) – 成员所在的类。
2. name(名称) – 类成员的名称。

3. descriptor(描述符) – 成员描述符。本质上是传入 Object.defineProperty 的对象。
   典型的应用示例是 @readonly。现在起来很简单：

   
   
   
   
   

   只需要通过设置属性描述符的 “writable” 标记为 false。
   然后在类属性上像这样使用：

   
   
   
   
   然而我们再做得好一些。我们可以用不同的行为来改变修饰功能。比如，记录所有输入和输出：
   
   
   
   这段代码使用新的方法取代了原来的方法，新方法会记录参数，调用原来的方法，然后记录原有方法的输出。
   

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

   
   
   
   
   你会发现我们不得不使用一个有点好笑的语法执行被修饰的方法。这种方法在整篇文章都有使用。不过总的来说， apply 函数能让你调用函数，指定 this 以及调用函数时传入的参数。
   我们来进行一点改进，让修饰符处理一些参数。比如你下面这样重写 log 修饰符：
   
   
   
   现在它变得更复杂了，但是拆解开来就容易解理了：
4. 一个函数， log，需要一个参数 ： name

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

   
   
   
   
   

   马上我们可以看到，我们提供的标签让我们可以在日志中很容易识别需要的内容。
   这是因为 log('some tag') 调用时，JavaScript 运行时立即对其进行运算，然后从 sum 方法的修饰符得到响应。

类修饰符

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

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

我们可以看到构造 Example 类实例时会记录提供给它的参数，而且构造出来的值确实是 Example 的实例。正是我们想要的。
向类修饰符传递参数与向类成员修饰符传递参数一样：

有兴趣想学习web前端的可以来web前端qun“189394454”可以免费获取2018最新web前端学习资料。
关注公众号→‘学习web前端’开启你的web前端学习之路