Полифилл (от англ. polyfill — "заплатка") — это код, который добавляет в старые браузеры или среды выполнения современные функции JavaScript, чтобы они вели себя так же, как в новых версиях.
Простыми словами: это "мост", который позволяет использовать новые фичи там, где их ещё нет.
[Зачем нужны полифиллы?]
Проблема: разные браузеры поддерживают разные версии JavaScript.
// Метод Array.includes() появился в ES2016
// В старых браузерах (например, IE11) его нет!
const arr = [1, 2, 3];
console.log(arr.includes(2)); // ❌ Ошибка в IE11
Решение: добавить полифилл, который эмулирует этот метод.
// Полифилл для Array.includes()
if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement) {
return this.indexOf(searchElement) !== -1; };
}
// Теперь работает везде! ✅
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
Примеры популярных полифиллов:
1. Promise (ES6)
// Старые браузеры не поддерживают Promise
if (!window.Promise) {
// Подключаем библиотеку-полифилл
// Например, es6-promise или core-js
}
2. fetch (для HTTP-запросов)
// fetch не работает в IE
if (!window.fetch) {
// Используем полифилл whatwg-fetch
// или заменяем на XMLHttpRequest
}
3. Object.assign (ES6)
if (!Object.assign) {
Object.assign = function(target, ...sources) {
sources.forEach(source => {
for (let key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
});
return target;
};
}
4. Array.from (ES6)
if (!Array.from) {
Array.from = function(arrayLike) {
return Array.prototype.slice.call(arrayLike);
};
}
[Как использовать полифиллы]
Способ 1: ручное добавление
< !-- Подключаем полифиллы вручную -->
< script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3/minified.js">< /script>
< script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13/runtime.js">< /script>
< script src="your-app.js">< /script>
Способ 2: через сборщики (Webpack, Vite)
// В entry-файле приложения
import 'core-js/stable';
import 'regenerator-runtime/runtime';
// Или только нужные полифиллы
import 'core-js/features/array/includes';
import 'core-js/features/promise';
Способ 3: автоматическое определение (Babel)
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage', // Автоматически добавляет полифиллы
corejs: 3,
targets: '> 0.25%, not dead' // Поддерживаемые браузеры
}]
]
};
Популярные библиотеки полифиллов:
| Библиотека |
Описание |
| core-js |
Самая популярная библиотека полифиллов для JS |
| regenerator-runtime |
Для поддержки async/await и генераторов |
| whatwg-fetch |
Полифилл для fetch API |
| es6-shim |
Полифиллы для ES6 фич |
| polyfill.io |
Сервис, который динамически подгружает нужные полифиллы |
Использование polyfill.io:
< !-- Автоматически подгружает только нужные полифиллы -->
< script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,
Array.from,Object.assign">
< /script>
[Полифиллы vs Транспиляция]
| |
Полифилл |
Транспиляция |
| Что делает |
Добавляет отсутствующие функции |
Преобразует синтаксис нового JS в старый |
| Пример |
Добавляет `Array.includes()` |
Преобразует `const` → `var`, стрелочные функции → обычные |
| Инструменты |
core-js, polyfill.io |
Babel, TypeScript |
| Когда использовать |
Для новых методов и API |
Для нового синтаксиса |
Пример:
// Исходный код (современный JS)
const double = (x) => x * 2;
// Транспиляция (Babel) → старый синтаксис
var double = function(x) { return x * 2; };
// Полифилл → добавляет метод, которого нет
if (!Array.prototype.find) {
Array.prototype.find = function(callback) {
// реализация...
};
}
[Когда НЕ нужно использовать полифиллы]
1. Если поддерживаются только современные браузеры.
2. Если функция уже есть в окружении (проверяйте!).
3. Если производительность критична (полифиллы медленнее нативных реализаций).
Проверка поддержки:
// Проверяем, нужен ли полифилл
if (!String.prototype.trim) {
// Добавляем полифилл
}
// Или с помощью Modernizr
if (!Modernizr.promises) {
// Подключаем полифилл для Promise
}
Практический пример:
< !DOCTYPE html>
< html>
< head>
< !-- 1. Проверяем поддержку -->
< script>
if (!window.Promise || !Array.prototype.includes) {
// 2. Подключаем полифиллы
document.write(
'< script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3/minified.js">< \/script>'
);
}
< /script>
< /head>
< body>
< script>
// 3. Используем современный код с уверенностью
const data = [1, 2, 3, 4, 5];
if (data.includes(3)) {
Promise.resolve('Работает!')
.then(msg => console.log(msg));
}
< /script>
< /body>
< /html>
Итог: полифилл это код-заплатка, который:
- Добавляет новые возможности в старые среды.
- Позволяет использовать современный JS без ограничений.
- Делает веб-приложения кроссплатформенными.
Главное правило: всегда проверяйте наличие функции перед добавлением полифилла и используйте автоматические инструменты (Babel + core-js) для управления ими.
