¿Cuál es la diferencia entre una cuña y un polyfill?

Shim

Si está familiarizado con el patrón de adaptador, entonces sabe lo que es una cuña. Shims intercepta las llamadas a la API y crea una capa abstracta entre la persona que llama y el destino. Normalmente se utilizan cuñas para mantener la compatibilidad. Por ejemplo, el paquete npm es5-shim le permitirá escribir la sintaxis ECMAScript 5 (ES5) y no le importará si el navegador está ejecutando ES5 o no. Tomar Fecha.ahora como ejemplo. Esta es una nueva función en ES5 donde la sintaxis en ES3 sería nueva fecha().getTime () . Si utiliza el es5-shim puede escribir Fecha.ahora y si el navegador en el que se está ejecutando es compatible con ES5, simplemente se ejecutará. Sin embargo, si el navegador está ejecutando el motor ES3 es5-shim interceptará la llamada a la fecha .ahora y simplemente devuelve nueva fecha().getTime () en su lugar. Esta intercepción se llama shimming. El código fuente relevante de es5-shim se ve así:

if (!Date.now) {
    Date.now = function now() {
        return new Date().getTime();
    };
}

Polyfill

El polyfilling es realmente solo una versión especializada de shimming. Polyfill se trata de implementar características faltantes en una API, mientras que un shim no necesariamente se trata tanto de implementar características faltantes como de corregir características. Sé que esto parece demasiado vago, pero donde las calzas se utilizan como un término más amplio, polyfill se utiliza para describir calzas que proporcionan compabilidad hacia atrás para los navegadores más antiguos. Así que mientras que las calzas se usan para encubrir pecados antiguos, los polyfills se usan para traer futuro mejoras en el tiempo. Como ejemplo, no hay soporte para sessionStorage en IE7, pero el polyfill en el paquete sessionstorage npm agregará esta característica en IE7 (y anteriores) mediante el uso de técnicas como el almacenamiento de datos en la propiedad name de la ventana o mediante el uso de cookies.

Por lo que entiendo:

Un polyfill es un código que detecta si falta una cierta API "esperada" y la implementa manualmente. Por ejemplo,

if (!Function.prototype.bind) { Function.prototype.bind = ...; }

Un shim es un código que intercepta llamadas API existentes e implementa un comportamiento diferente. La idea aquí es normalizar ciertas API en diferentes entornos. Por lo tanto, si dos navegadores implementan la misma API de manera diferente, podría interceptar las llamadas API en uno de esos navegadores y hacer que su comportamiento se alinee con el otro navegador. O, si un navegador tiene un error en una de sus API, podría interceptar nuevamente las llamadas a esa API y luego eludir el error.

Citando Axel Rauschmayer de su libro Hablando de JavaScript:

• Una shim es una biblioteca que trae una nueva API a un entorno anterior, utilizando sólo los medios de ese entorno.
• Un polyfill es una cuña para una API de navegador. Normalmente comprueba si un navegador soporta una API. Si no lo hace, el polyfill instala su propio aplicación. Eso le permite usar la API en cualquier caso. El término polyfill viene de un hogar producto de mejora; según Remy Sharp :

  Polyfilla es un producto del Reino Unido conocido como Spackling Paste en los Estados Unidos. Con eso en mente: piense en los navegadores como una pared con grietas en ella. Estos [polyfills] ayudan a suavizar las grietas y nos dan una buena pared lisa de navegadores para trabajar.

Shim. Una shim es una biblioteca que trae una nueva API a un entorno más antiguo, utilizando solo los medios de ese entorno.

Polyfill. En octubre de 2010, Remy Sharp blogueó sobre el término "polyfill "[vía Rick Waldron]:

Un polyfill es una pieza de código (o plugin) que proporciona la tecnología que usted, el desarrollador, espera que el navegador proporcione de forma nativa. Aplanar el paisaje de la API si se quiere.

Un fantástico artículo escrito sobre esto desde hace unos años que explica esto bien:

¿Qué es un Polyfill?

En el artículo los (2) simplemente se contrastan como tales:

Shim: un fragmento de código que se podría agregar (es decir, JavaScript) que corregiría alguna funcionalidad, pero que más a menudo tendría es propia API.

Polyfill: algo que podrías dejar caer (es decir, JavaScript) y funcionaría silenciosamente para imitar api de navegador existentes que de otro modo no son compatibles.