«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на 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';
});

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

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

Ваше Имя:

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

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

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


Рунет - Часть 5
Контекст вызова в обработчиках событий – this в стрелочной функции
313
Методы объекта ClassList - Работа с классами - Свойство length
922
Делегирование событий - Отслеживание событий на множестве элементов
2975
Пример создания табов в JavaScript - Работа с проектом
1000
Методы setTimeout, setInterval и clearInterval – Синтаксис
749
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
612
Таймер обратного отсчета – Остаток времени до полуночи
1332
Cвойства clientWidth и clientHeight - Размеры элементов DOM
600
Вызов и закрытие модального окна - Триггеры и data-атрибуты
4516
Открытие модального окна через промежуток времени и в конце страницы
559
Функции-конструкторы - Прототип объекта. Свойство prototype
252
Контекст вызова функции this - Методы call, apply и bind
306
Объявление и наследование классов - Свойство constructor
177
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки