this — контекст выполнения функций в JavaScript

Один из известных Ютуберов сказал, что this — это просто. Однако многие начинающие программисты с этим не согласятся. Попробуем совместными усилиями разобраться в этой теме.

Для начала, несколько определений:

• контекст выполнения функций — упрощенно это объект (окружение), внутри которого вызвана функция
• window — это глобальный объект
• this — это ключевое слово, которое доступно внутри любой функции

this — это ссылка на некий объект, к свойствам которого можно получить доступ внутри вызова функции. Этот this — и есть контекст выполнения.

Источник: doka.guide

this — всегда объект!

Создаем и вызываем простейшую функцию

function sayHello() {
	console.log('Hello', this);
}

sayHello();

Что в данном случае является контекстом выполнения функции? Функция sayHello вызвана внутри глобального объекта Window, в чем мы можем убедится взглянув на скриншот ниже.

Метод объекта

Объект — это набор свойств, и каждое свойство состоит из имени и значения, ассоциированного с этим именем. Значением свойства может быть функция, которую можно назвать методом объекта.

Метод — это свойство объекта, являющееся функцией.

Источник: «Работа с объектами»

this — ссылка на объект, метод которого мы сейчас вызываем.

1. Создадим объект person.
2. Сделаем ранее созданную функцию sayHello свойством объекта (методом). Кроме «Hello», функция должна выводить в консоль имя хранящаяся в свойстве name.
3. Вызовем метод объекта и посмотрим, что хранится в this.

const person = {
	name: 'Ivan',
	sayHello() {
		console.log(`Hello, ${person.name}!`, this);
	}
}

person.sayHello();

Что мы теперь знаем?

• В this хранится ссылка на объект person.
• К свойствам объекта можно получить доступ внутри вызова функции.

Получается, для вывода в консоль имени «Ivan», мы вместо фрагмента кода person.name, можем использовать this.name.

Добавим в объект метод sayHi, в котором и используем this.name.

const person = {
	name: 'Ivan',
	sayHello() {
		console.log(`Hello, ${person.name}!`, this);
	},
	sayHi() {
		console.log(`Hi, ${this.name}!`, this);
	}	
}

person.sayHello();
person.sayHi();

Видео

Что такое контекст this. Как работает call, bind, apply (Владилен Минин)

Благодаря этому видео, многие начинающие программисты наконец-то поняли, что такое this.

Не бойтесь THIS в JS (Алекс Луценко)

Просмотрев видео вы усвоите важную истуну:

Значение this зависит только от того, на каком объекте вызвана функция, а не в каком объекте она хранится.

Курс «Веб‑разработчик» (Яндекс.Практикум)

Еще раз о this

• this — всегда объект.
• this зависит от того, на каком объекте вызвана функция, а не в каком объекте она хранится.
• В зависимости от способа вызова функции this принимает разные значения.
• Ключевое слово this целиком зависит от того, где и как была вызвана функция. И не важно, в каком месте кода функция была написана — привязка this происходит при каждом вызове.
• Чтобы определить, на что ссылается this, нужно исследовать точку вызова функции. Это то место в коде, где происходит вызов функции.
• В ES2015 представлены стрелочные функции, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).
• В глобальном контексте выполнения (за пределами каких-либо функций) this ссылается на глобальный объект вне зависимости от режима (строгий или нестрогий).
• В пределах функции значение this зависит от того, каким образом вызвана функция.