тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Потеря контекста в JavaScript

Пусть у нас есть функция в функции. Давайте внешнюю функцию назовем parent, а внутреннюю - child:

function parent() { function child() { } }

Из предыдущих уроков вы знаете, что если задать какую-либо переменную во внешней функции - она будет доступна во внутренней:

function parent() { let str = 'abcde'; function child() { console.log(str); // выведет 'abcde' } child(); // вызываем внутреннюю функцию } parent(); // вызываем внешнюю функцию

Есть, однако, нюанс: внутренняя функция имеет доступ ко всем переменным внешней, но не имеет доступа this. То есть: если внешняя функция привязана к какому-то DOM элементу, то this в ней будет указывать на этот элемент, но this внутренней функции - не будет!

На что же тогда будет указывать this внутренней функции? Ответ: он будет равен undefined (в строгом режиме), так как функция ни к чему не привязана.

Давайте проверим на практике.

Пусть у нас дан инпут:

<input id="elem" value="text">

Привяжем к этому инпуту функцию parent, которая будет вызываться по потери фокуса инпутом:

"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); // Вызовется по потери фокуса: function parent() { // тут будет какой-то код function child() { // тут будет какой-то код } child(); // вызываем дочернюю функцию }

Давайте выведем содержимое this в консоль в двух местах: внутри функции parent и внутри функции child:

"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this); // выведет ссылку на наш инпут function child() { console.log(this); // выведет undefined } child(); }

Запустите этот код, потеряйте фокус инпуту и посмотрите в консоль - вы увидите, что первый console.log выведет в консоль ссылку на наш инпут, а второй - просто undefined. Такая ситуация, когда this неожиданным для нас образом указывает не на то, что нам нужно, называется потеря контекста.

Пусть теперь в одной и во второй функции мы будем выводить value инпута. Определите, что выведется в строчках кода, отмеченных комментариями:

"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this.value); // что выведет? function child() { console.log(this.value); // что выведет? } child(); }