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

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

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

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

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

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

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

Содержание

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

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

sayHello();

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

Ожидаемо функция вывела в консоль браузера приветственное слово "Hello" и this - объект, на котором функция вызвана. В данном случае это глобальный объект  Window
Ожидаемо функция вывела в консоль браузера приветственное слово «Hello» и this — объект, на котором функция вызвана. В данном случае — это глобальный объект 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, который является контекстом выполнения функции 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 зависит от того, каким образом вызвана функция.

Будьте первыми - оставьте свой комментарий!

Оставить комментарий

Ваш e-mail не будет нигде опубликован


*