什么是polyfill和shim？如何实现它们的原理？

4 min read

Polyfill和shim通常用来解决浏览器兼容性问题。

Polyfill是指一种逐渐实现新web标准的方法。当一个新的web标准发布时，有些浏览器还没有支持该标准，因此开发者可以使用一些JS库将该标准在这些浏览器上模拟出来，以达到实现该标准的目的，这种库就称为Polyfill。可以通过检测浏览器是否支持该特性来决定是否将Polyfill加载到页面中。

Shim则是一个较为通用的概念，是指实现一种特定功能的代码块，通常用来填充浏览器缺乏的某些ES特性。其主要思想就是实现一个与现代浏览器的特性相同的接口，并在旧版浏览器上进行模拟实现。

实现Polyfill和Shim的方法，通常就是通过检查浏览器支持的特性是否存在来判断是否需要加载Polyfill或Shim。在代码中，可以检查全局对象上是否存在某一个特定的属性或方法，从而决定是否需要加载相应的Polyfill或Shim。

举个例子，如果要为ES5中的Array.prototype.indexOf方法写一个Polyfill，可以在代码中检查该方法是否存在，如果不存在，则手动实现一个，例如：

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(searchElement, fromIndex) {
        // searchElement：要查找的元素
        // fromIndex：开始查找的位置，如果不指定则从头开始
        // 实现数组查找的逻辑
    };
}

通过这种方式，旧版浏览器环境中的Array对象就有了indexOf方法，从而改善了浏览器的兼容性。