Что такое this’?

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

Энн — разработчик программного обеспечения и преподает в школе Marcy Lab.

В приведенном выше предложении мы используем местоимение «она» для обозначения Энн, а не для прямого обращения к ней. Точно так же JavaScript использует this для ссылки на объект в контексте.
Прежде чем начать, давайте ознакомимся с парой терминов:

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

Это разные способы вызова функции:

1) this в функции

В приведенном выше коде функция не инициализируется внутри какого-либо объекта, поэтому родительский объект для функции находится в объекте окна. Таким образом, когда вы вызываете функцию `valueOfThis()` в строке 5, она напечатает объект окна в консоли.

2) this в методе

Методы — это функции, определенные внутри объекта. В приведенном выше коде метод `valueOfThis` находится внутри объекта `methodExample`. Когда метод вызывается в строке 7, мы вызываем функцию внутри объекта с записью через точку. Эта функция напечатает объект `valueOfThis`, так как метод находится внутри этого объекта, а не объекта окна.

3) this в конструкторе

Здесь мы создаем экземпляр объекта, используя `класс`. В строке 2 роль функции-конструктора заключается в инициализации экземпляра объекта. Вызов конструктора создает новый пустой объект, который наследует свойства прототипа конструктора. В строках 11 и 13 мы создаем два экземпляра объекта-прототипа, и this относится к отдельному свойству объекта, а не к classstructorExample. Таким образом, он печатает два объекта с разными значениями свойств объекта.

Строгий и нестрогий режимы

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

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

Почему this не работает в стрелочных функциях, как мы ожидаем?

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

Приведенный выше код выводит на консоль два объекта window. Внутри объекта в строке 7 мы объявляем метод, используя синтаксис стрелочной функции, поэтому вместо this ссылки на объект example он наследует контекст выполнения из шага выше объекта. Таким образом, this становится объектом window.

Надеюсь, что путаница с ключевым словом this устранена. Удачного кодирования!!