Далее на странице...
- this в классической функции-обработчике this в таких случаях - это почти всегда event.target Контекст вызова - это элемент, на котором произошло событие
- this в стрелочной функции Стрелочная функция не имеет своего контекста вызова Cтрелочная функция берет контекст вызова у родителя
- this в стрелочной функции-обработчике В стрелочной функции-обработчике контекст вызова теряется Вместо this используется event.target
В продолжение предыдущей темы, здесь будет рассмотрено, как контекст вызова 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.
Если бы в примере была обычная функция, то в результате был бы : пример см. здесь - Внутренняя функция метода объекта.
Но здесь используется стрелочная функция 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')
Код не работает!!! Говоря проще: контекст вызова здесь «потерялся».
У стрелочной функции нет своего контекста вызова. Поэтому здесь она обращается в .
Если же не будет 'use strict', то она обратиться в Window.
Правило: в обработчиках событий, когда используется простой вызов функции (через function), есть доступ к this.
Если используется стрелочная функция => контекст вызова теряется.
Поэтому код из примера выше следует оптимизировать, используя event.target.
JavaScript-код
'use strict';
const btn = document.querySelector('button');
btn.addEventListener('click', (e) => {
e.target.style.backgroundColor = 'yellow';
});
Результат в Браузере
