什么是 Babel
Babel 是一款流行的 JavaScript 编译器，它可以把最新版的 JavaScript 代码转成可以运行在现代浏览器上的旧版 JavaScript 代码。在现代客户端 Web 开发的大背景下，支持 ES6 规范的浏览器已经越来越多，但是在某些情况下，我们仍然需要向下兼容一些过时的浏览器，这时候就需要用到 Babel 去编译 ES6 代码。
什么是 Polyfill
Polyfill 是指通过在这些浏览器中手动增加缺失的 JavaScript 功能，使 JavaScript 代码能够在这些浏览器中正常运行。在 Babel 编译 ES6 代码之后，有些新的 JavaScript API，如Array.prototype.includes()，某些功能还不能在所有浏览器中使用，为了确保能够在所有浏览器上正常执行代码，我们就需要手写 Polyfill。
为什么需要手写 Polyfill
在使用 Babel 编译 ES6 代码生成旧版 JavaScript 代码后，生成的代码是符合旧版语法规范的，但它不包含新语法特性的补丁。而手写 Polyfill 就是为了补充这些新语法特性的补丁，使得这些新语法在所有浏览器上都能够正常运行。
如何手写 Polyfill
在 JavaScript 的全局空间下定义一个新的原型方法或属性，就可以手写一个 Polyfill。以下是 Array.prototype.includes() 的 Polyfill 实现示例代码：
-- -------------------- ---- -------
-- --------------------------- -
------------------------ - ---------------------- --- ------------ -
---- --------
-- ----- -- ----- -
----- --- ----------------------------------- ------ -- ---- -- ------------
-
--- - - -------------
--- --- - ------------------ --- -- --
-- ---- --- -- -
------ ------
-
--- - - ---------------------- --- -- --
--- --
-- -- -- -- -
- - --
- ---- -
- - --- - --
-- -- - -- -- - ---
-
--- ---------------
----- -- - ---- -
-------------- - -----
-- -------------- --- -------------- --
-------------- --- ------------- -- -------------- --- ---------------- - -- --- --- ---
------ -----
-
----
-
------ ------
--
-总结
Babel 编译器可以将最新版本的 JavaScript 代码转换成可以运行在旧版浏览器中的代码，但它不能为每一种新的语法特性生成对应的补丁。因此，手写 Polyfill 是确保代码在所有浏览器上顺利运行的好方法。如果我们能够熟练手写 Polyfill，就可以确保我们的代码在更广泛的浏览器范围内正确地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cdede48841e989498ff95