Понимание JavaScript: это ключевое слово, часть 2

Понимание JavaScript: это ключевое слово, часть 2

В своей предыдущей статье я рассмотрел, как может различаться значение this в зависимости от контекста, в котором оно было вызвано. Часть 2 покажет краткий обзор того, как this в стрелочных функциях не следует этим четырем правилам, изложенным в части 1.

Стрелочная функция обозначается не ключевым словом function, а =>, оператором «толстая стрелка». Функция стрелки принимает привязку this из вмещающей (функциональной или глобальной) области. Давайте посмотрим на пример:

function foo () { 
  return a => console.log(this.a); 
}
const obj1 = { a: 2 };
const obj2 = { a: 3 };
const bar = foo.call(obj1);
bar.call(obj2); // 2

Стрелочная функция в foo лексически захватывает значение this foo при вызове obj1. Поскольку foo была this привязана к obj1, bar (ссылка на возвращаемую стрелочную функцию) также будет this привязана к obj1 и не может быть переопределена путем вызова этой функции для obj2. Лексическая привязка стрелочной функции также не может быть переопределена ключевым словом new.

Наиболее распространенный вариант использования, скорее всего, используется в обратных вызовах, таких как обработчики событий или таймеры. Например:

function foo() {
	setTimeout(() => {
		// `this` here is lexically adopted from `foo()`
		console.log( this.a );
	}, 100);
}

var obj = {
	a: 2
};

foo.call( obj ); // 2

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