1
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 с помощью замыкания, увеличив количество ссылок на нее, поэтому и смогли ей воспользоваться.

yataw
  • 37
  • 4

1 Answers1

0

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

"сборщик мусора уже удалил переменную 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.

  • Не могли бы пояснить, почему произошла потеря контекста? Я сталкивался с такой проблемой, когда где-то в коде вызываемой функции использовалось this, именно поэтому необходимо сделать обертку, например bind. Однако здесь же явно указано document.body, т.е. явная ссылка на объект, без this. Откуда тогда проблема? – yataw Sep 21 '18 at 10:46
  • Кажется понял. document.body.removeChild - ссылка на метод. При вызове внутри себя он использует this. Если вызывать метод через точку (document.body.removeChild), то контекстом служит document.body. Если же напрямую, то контекст this устанавливается в window. Так правильно? – yataw Sep 21 '18 at 13:06
  • @yataw Да, правильно. –  Sep 21 '18 at 13:07