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

2018-03-19 本文已影响42人烟雨丿丶蓝

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

什么是修饰符?

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

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

为什么使用修饰符？

修饰符的不同类型

类成员修饰符

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

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

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

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

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

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

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

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

你会发现我们不得不使用一个有点好笑的语法执行被修饰的方法。这种方法在整篇文章都有使用。不过总的来说， apply 函数能让你调用函数，指定 this 以及调用函数时传入的参数。
我们来进行一点改进，让修饰符处理一些参数。比如你下面这样重写 log 修饰符：

现在它变得更复杂了，但是拆解开来就容易解理了：
一个函数， log，需要一个参数： name
这个函数返回另一个本身是修饰符的函数。这与之前的 log 修饰符相同，除了它要使用来自外部函数的 name 参数。
像下面这样使用：

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