TypeError: Illegal invocation — что значит и как исправить в JavaScript

hannadev

Ошибка TypeError: Illegal invocation часто встречается в JavaScript-коде и сбивает с толку новичков. Она возникает, когда функция вызывается без правильного контекста this, что ломает её внутреннюю логику. В этой статье разберём, почему она появляется и как её быстро исправить — от простых случаев до сложных сценариев с DOM и AJAX.

Знание этой ошибки сэкономит часы отладки. Вы поймёте типичные ловушки в jQuery, Proxy, setTimeout и Angular, а также получите готовые рецепты фиксов. Прочитайте, чтобы больше не тратить время на гуглинг стектрейса.

Почему возникает TypeError: Illegal invocation

Эта ошибка сигнализирует, что JavaScript не может выполнить функцию из-за потери контекста выполнения. Функции в JS тесно связаны с объектом, на котором они определены — это и есть this. Когда вы выдираете функцию из своего “дома” и вызываете её самостоятельно, движок ругается: “Куда я попал?”

Классический пример — методы DOM-объектов. Возьмём element.style.setProperty() или console.log(). Если передать их в setTimeout или массив напрямую, this потеряется, и вылетит ошибка. То же самое с AJAX в jQuery: передача DOM-объекта вместо простого JSON приводит к краху.

В реальном коде это часто случается при работе с колбэками, Proxy или фреймворками вроде Angular. Стектрейс обычно указывает на цепочку вызовов вроде $digest или completeOutstandingRequest. Логично сначала проверить, не оторвали ли вы метод от объекта.

Вот типичные сценарии:

Передача Blt.parentNode.removeChild в setTimeout без контекста.
Использование $('#element') как data в $.ajax().
Proxy над DOM-элементом без правильной привязки методов.

Как исправить в AJAX и jQuery

В jQuery ошибка Illegal invocation в $.ajax() — одна из самых частых. Библиотека ожидает простой объект {key: value}, а вы пытаетесь засунуть DOM-элемент или jQuery-объект. jQuery не знает, как сериализовать его для сервера, и кидает ошибку.

Представьте: нужно отправить значение инпута. Неправильно — data: $('#input'). Правильно — data: { value: $('#input').val() }. Здесь this внутри val() остаётся привязанным к элементу, и всё работает.

Другой случай — processData: false для FormData. Но даже тут контекст важен. Всегда проверяйте, что передаёте пары ключ-значение, а не сырые ссылки.

Шаги для фикса в AJAX:

Замените DOM/jQuery-объекты на их значения: .val(), .text().
Используйте JSON.stringify() для сложных структур.
Добавьте contentType: 'application/json' при необходимости.
Тестируйте в консоли: console.log(typeof data) — должен быть ‘object’.

Ситуация	Неправильно	Правильно
Значение ин��ута	`data: $('#inp')`	`data: {val: $('#inp').val()}`
Массив форм	`data: form.elements`	`data: new FormData(form)`
JSON-объект	`data: element.dataset`	`data: Object.fromEntries()`

Проблемы с DOM, Proxy и setTimeout

С DOM-методами вроде appendChild() или style.color ошибка вылазит при работе через Proxy или таймеры. Proxy перехватывает get, но забывает восстановить this для методов. В результате cleverDiv.style.color = 'red' падает с Illegal invocation.

В setTimeout та же беда: setTimeout(element.removeChild, 1000) теряет контекст. Метод ожидает вызов на своём объекте, а получает голый вызов. Фреймворки вроде Angular усугубляют: $digest крутит цикл, и оторванный equals рушит всё.

Решение — bind(), стрелочные функции или обёртки. Для Proxy добавьте проверку: если значение функция, верните её с .bind(target).

Правильная работа с Proxy и таймерами:

В Proxy: return typeof value === 'function' ? value.bind(target) : value;.
В setTimeout: setTimeout(() => element.removeChild(child), 1000).
Для стилей: Object.defineProperty(proxy, 'style', {get: () => element.style}).
Проверяйте в DevTools: console.log(this) внутри метода.

Инструмент	Фикс	Пример
setTimeout	Стрелка	`() => method.call(obj)`
Proxy	bind()	`value.bind(target)`
Event listener	.bind(this)	`handler.bind(element)`

Продвинутые случаи и лучшие практики

В Angular ошибка часто в $digest/$apply — цепочка equals() теряет this. Решение: оборачивайте в $scope.$apply() с правильным контекстом. В TypeScript добавьте типы для this: method: { [K in keyof T]: T[K] extends Function ? T[K] : never }.

Общие практики: используйте .call(), .apply() или .bind(). Для массивов методов — array.map(fn => fn.bind(obj)). Избегайте eval() и динамических вызовов без проверки.

Топ-5 практик против Illegal invocation:

Всегда биндите методы: fn.bind(context).
Стрелки для колбэков: () => obj.method().
В Proxy — полная эмуляция this.
Логгируйте this: console.log(this) в начале функции.
Тестируйте в strict mode: ‘use strict’;.

Когда ошибка прячется глубже

Иногда Illegal invocation маскируется под другие проблемы — проверьте промисы, async/await и Web Workers. В них контекст тоже улетает. Подумайте о миграции на современный JS: Proxy стал лучше с ES6, но требует аккуратности.

В старом коде ищите var/let hoist’ы — они меняют scope. Осталось поэкспериментировать с вашим стектрейсом: скопируйте в песочницу и добавьте console.log(this) в проблемную функцию. Дальше — дело техники.