Polyfill是填补浏览器新特性兼容性缺口的代码补丁，通过特征检测决定是否手动实现缺失功能；需按需加载，避免全局引入，并可自定义简单实现如Array.prototype.includes。
JavaScript的浏览器兼容问题主要出现在新语法、新API在旧版浏览器中不可用，Polyfill就是用来填补这种能力缺口的代码补丁。核心思路是：先检测浏览器是否原生支持某特性，不支持就手动实现一个功能等价的版本。
常见需要Polyfill的场景
不是所有新特性都需要Polyfill，重点看目标用户使用的浏览器范围（比如是否需支持IE11或旧版Safari）。典型例子包括：
- Promise、fetch、Array.from、Object.assign：ES6+内置对象和方法，在IE中完全缺失
- IntersectionObserver、ResizeObserver：现代DOM观测API，旧版Chrome/Firefox也不支持
- Custom Elements、Shadow DOM：Web Components相关API，IE和部分安卓WebView无支持
- CSS.supports()、:focus-visible伪类的JS检测：CSS能力检测接口，低版本浏览器返回undefined
如何正确使用Polyfill
不建议全局引入一堆Polyfill——体积大、执行慢、还可能引发冲突。推荐按需加载：
- 用polyfill.io按需服务：在script标签中引入https://polyfill.io/v3/polyfill.min.js?features=Promise%2Cfetch%2CArray.from，它会根据User Agent自动返回该浏览器真正需要的代码
- 在项目中按需导入：例如用core-js时，只导入需要的部分：import 'core-js/stable/promise'; import 'core-js/stable/array/from';
- 运行时特征检测 + 动态加载：比如检查if (!window.IntersectionObserver) { import('./polyfills/intersection-observer.js'); }
自己写一个简单Polyfill示例
以Array.prototype.includes为例（IE不支持）：
立即学习“Java免费学习笔记（深入）”；
if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement, fromIndex = 0) {
const len = this.length;
const startIndex = fromIndex >= 0 ? fromIndex : Math.max(len + fromIndex, 0);
for (let i = startIndex; i < len; i++) {
if (this[i] === searchElement || (this[i] !== this[i] && searchElement !== searchElement)) {
return true;
}
}
return false;
};
}
注意两点：一是必须先检测原生是否存在，避免覆盖；二是要严格遵循规范行为（比如处理NaN相等）。
现代开发中的替代思路
Polyfill不是唯一解，结合构建工具可更高效：
- Babel + @babel/preset-env：根据browserslist配置自动转换语法（如箭头函数、async/await），但不处理API缺失（需配合core-js）
- Feature detection优于Browser detection：用'fetch' in window而不是/MSIE|Trident/.test(navigator.userAgent)，更可靠且面向未来
- 渐进增强设计：基础功能用原生API实现，高级交互再加载Polyfill或降级方案，保证核心流程可用
