Почему Uncaught TypeError: Illegal invocation? (Element.classList)

257
29 апреля 2017, 23:24

Поясните пожалуйста, почему следующий код:

Element.prototype.addClass = function() { 
  const args = Array.prototype.slice.call(arguments); 
  return Element.prototype.classList.add.apply(this, args); 
}; 
 
document.body.addClass('first', 'two');

https://jsfiddle.net/0s5gptfb/

вызывает ошибку Uncaught TypeError: Illegal invocation?

Что-то с контекстом?

Answer 1

Что происходит?

Метод Element.prototype.classList.add принадлежит интерфейсу DomTokenList, и должен вызываться в контексте DomTokenList (в вашем случае Element.classList).

Внутри метода Element.prototype.addClass переменная this указывает на экземпляр Element, иными словами, вы пытаетесь вызвать метод add в контексте неправильного объекта.

Что делать?

Нужно передавать правильный контекст методу Element.prototype.classList.add. Например так:

Element.prototype.addClass = function() {
    const args = Array.prototype.slice.call(arguments);
    return this.classList.add.apply(this.classList, args);
};
document.body.addClass('first', 'two');

А вот и рабочий пример на JSFiddle.

READ ALSO
Что учить Фронтэндеру в 2017? [требует правки]

Что учить Фронтэндеру в 2017? [требует правки]

После изучения основ (HTML,CSS,SASS,Bootstrap,JS,jQuery) я столкнулся с проблемой - а что дальше-то? В мире Фронтэнда существует очень много фреймворков и библиотек,...

269
Объеденить 3 функции в одну

Объеденить 3 функции в одну

Как объеденить эти 3 функции, в одну, но чтобы работали все 3

281