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

Решение проблемы с контекстом в JavaScript

В предыдущем уроке вы увидели, как теряется контекст во внутренней функции. Давайте решим эту проблему. Существует несколько способов решения. Давайте их разберем.

Первое решение проблемы

Решение следующее: во внешней функции запишем this в любую переменную и эта переменная будет доступна во внутренней функции, как и все переменные (обычно эту переменную называют self). Таким образом мы передадим this из внешней функции во внутреннюю:

"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this.value); // выведет 'text' let self = this; // запишем this в любую переменную, например, в self function child() { console.log(self.value); // выведет 'text' } child(); }

Пусть дан такой код:

<input id="elem" value="3"> "use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', func); function func() { alert( square() ); function square() { return this.value * this.value; } }

Автор кода хотел, чтобы по потери фокуса на экран вывелся квадрат числа из value инпута. Однако, почему-то при потери фокуса в консоль выдается ошибка.

Исправьте ошибку автора кода. Напишите текст, в котором вы дадите объяснение автору кода, почему возникла его ошибка.

Второе решение проблемы

Существует и другое решение проблемы. Сделаем так, чтобы функция child принимала параметр:

function child(param) { // тут будет код }

А при вызове этой функции будем передавать в нее this:

function parent() { child(this); // передаем параметром this function child(param) { // в переменной param лежит переданное содержимое this } }

Так как вызов child осуществляется в родительской функции, то и передаваемый this указывает на то, что нужно. Затем этот this попадает в параметр param и в таком виде и будет доступен внутри функции.

Вот окончательный код:

let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { child(this); // передаем параметром this function child(param) { console.log(param.value); // выводим value инпута } }

Возьмите код из предыдущей задачи и исправьте проблему кода с помощью изученного второго способа.

Третье решение проблемы

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

let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this.value); // выведет 'text' let child = () => { console.log(this.value); // выведет 'text' } child(); }

Возьмите код из предыдущей задачи и исправьте проблему кода с помощью изученного третьего способа.