JavaScript 编程中的 Polyfills 指的到底是什么?
共 1862字，需浏览 4分钟
· 2019-12-26
JavaScript 语言在稳步发展。也会定期出现一些对语言的新提议，它们会被分析讨论，如果认为有价值，就会被加入到 https://tc39.github.io/ecma262/ 的列表中，然后被加到 规范[1] 中。
JavaScript 引擎背后的团队关于首先要实现什么有着他们自己想法。他们可能会决定执行草案中的建议，并推迟已经在规范中的内容，因为它们不太有趣或者难以实现。
因此，一个 JavaScript 引擎只能实现标准中的一部分是很常见的情况。
查看语言特性的当前支持状态的一个很好的页面是 https://kangax.github.io/compat-table/es6/（它很大，我们现在还有很多东西要学）。
Babel
当我们使用语言的一些现代特性时，一些引擎可能无法支持这样的代码。正如上所述，并不是所有功能在任何地方都有实现。
这就是 Babel 来拯救的东西。
Babel[2] 是一个 transpiler[3]。它将现代的 JavaScript 代码转化为以前的标准形式。
实际上，Babel 包含了两部分：
第一，用于重写代码的 transpiler 程序。开发者在自己的电脑上运行它。它以之前的语言标准对代码进行重写。然后将代码传到面向用户的网站。像 webpack[4] 这样的现代项目构建系统，提供了在每次代码改变时自动运行 transpiler 的方法，因此很容易集成在开发过程中。
第二，polyfill。
新的语言特性可能包括新的内置函数和语法构造。transpiler 会重写代码，将语法结构转换为旧的结构。但是对于新的内置函数，需要我们去实现。JavaScript 是一个高度动态化的语言。脚本可以添加/修改任何函数，从而使它们的行为符合现代标准。
更新/添加新函数的脚本称为 “polyfill”。它“填补”了缺口，并添加了缺少的实现。
两个有意思的 polyfills 是：
- core js[5] 支持很多，允许只包含需要的功能。
- polyfill.io[6] 根据功能和用户的浏览器，为脚本提供 polyfill 的服务。
所以，如果我们要使用现代语言功能，transpiler 和 polyfill 是必要的。
教程中的案例
大多数例子都是可运行的，例如：
alert('Press the "Play" button in the upper-right corner to run');
只有在你的浏览器支持它时才会工作的现代 JS 例子。
Google Chrome 通常是对新语言特性支持更新最快的，在没有任何 transpiler 的情况下，也能很好地运行前沿的演示，当然其他的现代浏览器也挺好。
本文首发于微信公众号「技术漫谈」，欢迎微信搜索关注，订阅更多精彩内容。
现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程[7]。
在线免费阅读：https://zh.javascript.info
参考资料
[1]规范: http://www.ecma-international.org/publications/standards/Ecma-262.htm
[2]Babel: https://babeljs.io
[3]transpiler: https://en.wikipedia.org/wiki/Source-to-source_compiler
[4]webpack: http://webpack.github.io/
[5]core js: https://github.com/zloirock/core-js
[6]polyfill.io: http://polyfill.io
[7]React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources
看完三件事
如果你觉得本文对你有帮助，我想请你帮个忙：
- 转发本文或者点个「在看」，让更多的人也能看到这篇内容；
- 关注公众号「技术漫谈」，订阅更多精彩内容，获取更多学习资料；
可以在本公众号后台回复「加群」，加入技术群，与更多读者交流。
长按上方二维码关注公众号「技术漫谈」，订阅更多精彩内容。
你“在看”我吗？
