«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Далее на странице...



В продолжение предыдущей темы, здесь будет рассмотрено, как контекст вызова this может использоваться на практике.

Примеры с обработчиками событий.



this в классической функции-обработчике

Как контекст вызова this ведет себя в функции-обработчике события?

Рассматривается пример с кнопкой.

Пример 1.1

HTML-код

<body>
    <button></button>
	<script src="script.js"></script>
</body>

JavaScript-код

'use strict';

const btn = document.querySelector('button');

btn.addEventListener('click', function() {
	console.log(this);
});

Результат в консоли

<button></button>

Результат в Браузере

Назначается обработчик события, так, что при клике по кнопке выводится в консоль контекст вызова this. При этом каждый раз при клике по кнопке мы будем видеть <button></button>

Правило №1. Когда функция-обработчик записывается в классическом варианте: так, как это видно из примера выше, то контекст вызова - это сам элемент, на котором произошло событие.

Другими словами, this в таких случаях это почти всегда event.target - элемент страницы, на котором произошло событие.

Как в этом убедиться? Например, используя контекст вызова this, можно изменить цвет кнопки при клике по ней.

Пример 1.2

JavaScript-код

'use strict';

const btn = document.querySelector('button');

btn.addEventListener('click', function() {
	this.style.backgroundColor = 'yellow';
});

Результат в Браузере

На практике, чаще используется объект события, а не контекст вызова. Это станет более понятным в конце статьи.

this в стрелочной функции

Разберем как внутренняя стрелочная функция работает с контекстом вызова this.

Следует знать (об этом уже шла речь ранее): стрелочная функция не имеет своего контекста вызова - она берет его у своего родителя.

Пример 2.1

JavaScript-код

'use strict';

const obj = {
	num: 5,
	sayNumber: function() {
		const say = () => {
			console.log(this);
		};
		say();
	}
};

obj.sayNumber();

Результат в Браузере

Результат в консоли

Object
num: 5
sayNumber: ? ()
[[Prototype]]: Object

1. Объект obj и его метод sayNumber.

2. Внутри метода стрелочная функция say, которая в консоль выводит this.

Для проверки обращаемся к объекту obj и его методу sayNumber.

Если бы в примере была обычная функция, то в результате был бы undefined: пример см. здесь - Внутренняя функция метода объекта.

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

Родителем функции say является метод sayNumber. У метода контекст всегда ссылается на объект, в котором он существует.

Пример ниже демонстрирует это.

Пример 2.2

JavaScript-код

'use strict';

const obj = {
	num: 5,
	sayNumber: function() {
		const say = () => {
			console.log(this.num);
		};
		say();
	}
};

obj.sayNumber();

Результат в Браузере

Результат в консоли

5

Функция say взяла контекст вызова у родителя (у метода объекта) и, таким образом, обратилась к объекту: и взяла его свойство num (значение свойства).

this в стрелочной функции-обработчике

Контекст вызова в обработчиках событий при использовании стрелочных функций.

Пример 1.2 (см. выше) демонстрирует, что this в функции-обработчике (в ее классическом варианте) обращается к самому элементу, на котором произошло событие.

Если в этом примере использовать стрелочную функцию, то мы увидим ошибку.

JavaScript-код

'use strict';

const btn = document.querySelector('button');

btn.addEventListener('click', () => {
	this.style.backgroundColor = 'yellow';
});

Результат в Браузере

Результат в консоли

Cannot set properties of undefined (setting 'backgroundColor')

Код не работает!!! Говоря проще: контекст вызова здесь «потерялся».

У стрелочной функции нет своего контекста вызова. Поэтому здесь она обращается в undefined.

Если же не будет 'use strict', то она обратиться в Window.

Правило: в обработчиках событий, когда используется простой вызов функции (через function), есть доступ к this.

Если используется стрелочная функция => контекст вызова теряется.

Поэтому код из примера выше следует оптимизировать, используя event.target.

JavaScript-код

'use strict';

const btn = document.querySelector('button');

btn.addEventListener('click', (e) => {
	e.target.style.backgroundColor = 'yellow';
});

Результат в Браузере



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Контекст вызова в обработчиках событий – this в стрелочной функции
211
Методы объекта ClassList - Работа с классами - Свойство length
759
Делегирование событий - Отслеживание событий на множестве элементов
2529
Пример создания табов в JavaScript - Работа с проектом
694
Методы setTimeout, setInterval и clearInterval – Синтаксис
518
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
452
Таймер обратного отсчета – Остаток времени до полуночи
987
Cвойства clientWidth и clientHeight - Размеры элементов DOM
468
Вызов и закрытие модального окна - Триггеры и data-атрибуты
3246
Открытие модального окна через промежуток времени и в конце страницы
357
Функции-конструкторы - Прототип объекта. Свойство prototype
164
Контекст вызова функции this - Методы call, apply и bind
219
Объявление и наследование классов - Свойство constructor
100

Тематические публикации
Популярные заметки
Последние заметки