Polyfill 是用于在旧版浏览器中模拟新版 API 或语法特性的 JavaScript 代码，通过检测并按规范补全缺失方法（如 includes、padStart），确保新写法兼容运行。
Polyfill 是一段 JavaScript 代码，用来在旧版浏览器中模拟新版浏览器才支持的原生 API 或语法特性。 它不是框架、不是库，而是一种“打补丁”的思路：当目标浏览器不支持某个标准功能时，开发者手动实现一个功能等价的替代版本，让新写法也能跑起来。
Polyfill 解决什么问题
比如 Array.prototype.includes 在 IE 完全不支持，但你又想用 [1, 2, 3].includes(2) 这种简洁写法。直接运行会报错 TypeError: ...includes is not a function。Polyfill 就是在执行业务逻辑前，先检查这个方法是否存在；不存在就自己挂上去：
- 检测全局对象（如
Array.prototype）是否已有该属性 - 没有就定义一个符合规范行为的函数
- 确保不覆盖已有的、正确的实现（避免污染或降级）
一个典型的 Polyfill 写法示例
以 String.prototype.padStart 为例（IE 和部分老安卓浏览器不支持）：
if (!String.prototype.padStart) {
String.prototype.padStart = function(targetLength, padString = ' ') {
targetLength = Math.floor(targetLength) || 0;
padString = String(padString || ' ');
if (this.length >= targetLength) return String(this);
let maxPadLength = targetLength - this.length;
let padded = '';
while (padded.length < maxPadLength) {
padded += padString;
}
return padded.slice(0, maxPadLength) + String(this);
};
}这段代码只在缺失时才添加，且尽量遵循 ES 规范中的边界处理（比如空字符串、NaN 转换、截断逻辑），不是简单粗暴地拼接。
立即学习“Java免费学习笔记（深入）”；
如何选择和使用 Polyfill
- 优先用成熟方案，比如 core-js 或 Polyfill.io，它们覆盖全面、测试充分、按需加载
- 不要盲目全量引入——按项目实际用到的 API 来 import，例如只用到了
Promise和Object.assign，就只加载这两个 - 构建时可结合 Babel（配合
@babel/preset-env+useBuiltIns: 'usage'）自动注入所需 Polyfill - 注意执行时机：Polyfill 必须在任何业务代码之前执行，通常放在入口文件顶部或 HTML 的第一个
<script></script>中
Polyfill 不是万能的
有些特性无法靠 JS 模拟，比如：
- CSS 新属性（
aspect-ratio、container query）——得靠降级布局或 JS 检测+适配 - 新的 HTML 元素（
<dialog></dialog>）——可用自定义元素或第三方组件模拟，但行为和语义不完全一致 - 底层能力缺失（WebAssembly、Web Workers、Fetch API）——老浏览器根本没对应引擎支持，Polyfill 只能降级为 XHR 等替代方案，无法真正“补全”
这时候需要配合特性检测（'fetch' in window）、渐进增强策略，甚至明确放弃极低版本浏览器。
基本上就这些。Polyfill 的核心是“按需修补、谨慎覆盖、尽早执行”，它让现代语法和 API 更平滑落地，但不能替代合理的兼容性规划和测试。
