​Что такое this

Часто понятие контекста this у новичков и не только вызывает массу вопросов.

Если максимально просто, то контекст — это объект. Это первый пункт, который необходимо запомнить. Контекст — это всегда объект, которому принадлежит исполнение кода. Что это значит?
Разберем на примере браузера:
Допустим, что есть функция foo()

function foo() {
    console.log(this === window)
}

Это весь наш код.  Если мы вызовем эту функцию в глобальной области видимости, то увидим в консоли значение true. Это происходит потому что наша функция вызывается относительно глобального объекта window. Вызов принадлежит объекту window. Более того,
this.hasOwnPropery('sayHi') === true

Созданная нами функция является методом внутри глобального объекта. Поэтому ключевое слово this в этом случае действительно равно объекту window.

Давайте попробуем создать класс с методом, который покажет нам контекст объекта, инстанса класса:

class Bar {
    constructor(number) {
   this.number = number
   this.name = 'denis'
    }
  
    showThis() {
   console.log(this)
    }
}

const bar = new Bar(5)
bar.showThis()

Достаточно простой код. Мы создаем класс Bar, в методе constructor объявляем контекст нашего класса. При вызове метода showThis мы увидим ожидаемый объект:

{
  name: "denis",
  number: 5
}

Метод showThis вызывается относительно объекта bar и его контекста. Поэтому мы видим созданный объект из конструктора класса. Если бы на вход к конструктору было подано другое значение, то мы получили бы и, соответственно, другой контекст. Отсюда получаем самые важные свойства контекста:

Контекст — ближайший вышестоящий объект, который управляет вызовом кода.
Контекст динамичен.
Контекст доступен по ключевому слову this.

На самом деле, this — это лишь ссылка на запись в памяти, которая указывает на контекст.  А если это всего лишь ссылка, то значит мы можем управлять контекстом, вау! На управлении контекстом реализованы несчетное количество паттернов и концепций. Об управлении контекстом мы поговорим позже, а за управление контекстом отвечают методы call,apply и bind. Их нужно знать и уметь применять, ждите новый пост.

Из нюансов:
1. Глобальный контекст разный на разных платформах: в браузере это объект window, в nodejs это объект global. 
2. Контекст разный в зависимости от режима работы: в режиме "use strict;" или без него. О том, что такое "use strict;" я тоже скоро расскажу.
3. Стрелочные функции не имеют собственного контекста. Их контекст всегда указывает на глобальный объект.
4. В DOM-API ключевое слово this указывает на объект event.currentTarget(). Для понимание этого пункта рассмотрите код ниже.

<button onclick="console.log(this.innerHTML)"> 
    Текст внутри кнопки
</button>

При нажатии на кнопку в консоли увидим сообщение "Текст внутри кнопки".
Занятно, но с современными фреймворками, наверное, бесполезно.

На этом всё. Спасибо за прочтение, это важно для меня.

#javascript #web #theory