Illegal invocation при вызове SetTimeout [дубликат]

243

05 января 2019, 09:30

На данный вопрос уже ответили:

Потеря контекста вызова 5 ответов

let div = document.createElement('div');
document.body.appendChild(div);
setTimeout(document.body.removeChild, 1000, div); //Uncaught TypeError: Illegal invocation
setTimeout( function(){ document.body.removeChild(div);}, 1000 );

Правильны ли следующие рассуждения:

В первом случае на момент вызова функции removeChild сборщик мусора уже удалил переменную div (дошли до конца скрипта). Во втором случае при объявлении безымянной функции мы взяли переменную div с помощью замыкания, увеличив количество ссылок на нее, поэтому и смогли ей воспользоваться.

Answer 1

Нет, рассуждения неправильны.

"сборщик мусора уже удалил переменную div" - А как же ссылка, переданная в setTimeout? Не говоря уже о том, что сам элемент находится в DOM-дереве и никуда не девается.

В Вашем коде функция removeChild вызывается в чужом контексте - window.

let div = document.createElement('div'); 
div.setAttribute("class", "mydiv"); 
document.body.appendChild(div); 
 
setTimeout(document.body.removeChild.bind(document.body), 1000, div);

.mydiv { 
  width: 50px; 
  height: 50px; 
  border: 1px solid black; 
  background: lightgreen; 
}

Update

Передавая куда-либо метод объекта, Вы отрываете его от контекста. Вашу ошибку можно воспроизвести более простым кодом:

let div = document.createElement('div');
div.setAttribute("class", "mydiv");
document.body.appendChild(div);
let remove = document.body.removeChild;
remove(div);

Здесь (как и у Вас) метод removeChild вызывается в контексте window, у которого, конечно, нет child-а div.