shim和polyfill有什么区别？它们分别有什么用？

在前端开发中，"shim" 和 "polyfill" 都是用来解决浏览器兼容性问题的技术，但它们的作用方式略有不同：

Polyfill:

• 作用: 模拟一个新的 API，如果浏览器不支持该 API，则提供其功能的实现。Polyfill 是一种更全面的解决方案，它试图完全复制缺失的功能。
• 目标: 提供缺失的 JavaScript 功能（例如新的 API 方法、语言特性等）。
• 如何工作: Polyfill 会检查浏览器是否原生支持某个 API。如果不支持，它会将自己的实现添加到全局作用域（例如 window 对象）中，从而使代码能够像使用原生 API 一样使用它。
• 例子: 为了在不支持 Promise 的旧版浏览器中使用 Promise，可以使用一个 Promise polyfill。这个 polyfill 会实现 Promise 对象及其相关方法（then、catch、finally 等），使你的代码能够正常使用 Promise，即使浏览器本身并不支持。

Shim:

• 作用: 适配现有的 API，使其在不同的浏览器中行为一致。Shim 更加注重调整现有功能的行为，而不是添加全新的功能。
• 目标: 修复或增强现有 JavaScript API 的行为差异，使其在不同浏览器中表现一致。
• 如何工作: Shim 通常会拦截对现有 API 的调用，并根据需要修改其行为，以弥补浏览器之间的差异。它可能不会完全模拟缺失的功能，而是调整现有的功能以使其更具互操作性。
• 例子: 假设某个旧版浏览器对 addEventListener 方法的支持不完整。一个 shim 可以拦截对 addEventListener 的调用，并根据浏览器的具体行为进行调整，以确保事件监听器在不同浏览器中都能正常工作。 另一个例子是，一些库可能依赖于特定的全局变量，而这些变量在某些浏览器中不存在。Shim 可以创建这些缺失的全局变量，以确保库能够正常运行。

关键区别总结:

特性	Polyfill	Shim
目的	提供缺失的 API	适配现有的 API，使其行为一致
作用	模拟全新的功能	调整现有功能的行为
范围	更广泛，通常模拟整个 API	更窄，通常只针对特定 API 的特定方面

类比:

想象一下，你需要一个特定的工具（API）。

• Polyfill: 如果你完全没有这个工具，polyfill 就像自己制作一个替代工具，使其功能尽可能接近你需要的工具。
• Shim: 如果你有一个不完美的工具（例如，锤子柄太短），shim 就像在锤子柄上加一个延长器，使其更易于使用。

在实际应用中，polyfill 和 shim 之间的界限有时会比较模糊。一些库可能同时使用 polyfill 和 shim 来解决各种兼容性问题。 选择使用哪种技术取决于具体的兼容性问题以及你希望如何解决它。 通常情况下，如果需要添加全新的功能，则应使用 polyfill；如果需要调整现有功能的行为，则应使用 shim。