«это» там, где оно находится

Как человек, который только недавно начал карьеру в веб-разработке, я имею уникальную возможность обсудить некоторые концепции с точки зрения новичка. Давайте разберем «это» как можно проще, чтобы лучше понять, как это работает и почему это важно.

Волшебное ключевое слово this во многих отношениях действует почти как переменная — оно представляет собой значение, которое будет меняться в зависимости от того, где и когда вы его запрашиваете. Однако значение this всегда будет объектом (как вы, возможно, уже слышали, почти все в JavaScript является объектом — привыкайте). Это подводит нас к трем основным правилам, которые информируют нас о ценности «этого» в зависимости от ситуации:

  1. По умолчанию «это» относится к глобальному объекту («глобальный объект окна» в браузере)
  2. Когда метод вызывается для объекта, this относится к этому объекту
  3. Когда функция вызывается с оператором «новый», «это» относится к вновь созданному экземпляру.

Давайте углубимся в первое правило: По умолчанию «это» относится к глобальному объекту («глобальный объект окна» в браузере).

Поскольку все является объектом (извините за упрощение), это первое правило закладывает основу для всего понятия «это». Когда мы пишем функции с глобальной областью видимости, их лексическая область видимости (это один шаг вверх в цепочке областей видимости) — это глобальный объект окна. Таким образом, в самом прямом смысле правило 1 действует точно так же, как правило 2 — this представляет объект, который вызывает содержащий его метод. Посмотрите на эти глобальные функции, такие как методы объекта окна, и вы поймете, что это правило имеет смысл!

Правило 2. Когда метод вызывается для объекта, this относится к этому объекту.

Если вы еще не сталкивались с ними, вы обязательно скоро столкнетесь с некоторыми из методов-прототипов JavaScript. Эти типы функций были моим первым знакомством с объектно-ориентированным программированием, и они служат хорошей основой для понимания этой идеи объектных методов. Такие методы, как forEach(), map() и push(), являются свойствами объекта Array, то есть вы можете использовать точечную нотацию для их вызова из массива. Эта структура станет для вас второй натурой довольно быстро, когда вы начнете создавать объекты и манипулировать ими.

Теперь вернемся к «этому». Когда мы вызываем метод прототипа из объекта, этот метод имеет соединение с его объектом. Эта связь и есть «это». Каждый раз, когда в этом методе делается ссылка на this, его значение равно связанному объекту. Понимание этой концепции является основой для понимания правила 3.

Правило 3. Когда функция вызывается с оператором «новый», «это» относится к вновь созданному экземпляру.

В ООП мы создаем организованные системы данных, которые взаимодействуют с объектами. Чтобы сохранить наш код СУХИМ, мы создаем классы, которые производят заранее созданные объекты. Думайте о классе как о сборочной линии на автомобильном заводе — на нем есть точно настроенные машины, которые собирают каждый автомобиль одинаковым образом, чтобы создать непротиворечивый продукт. Благодаря этому процессу вы можете легко заменить детали и отремонтировать конкретный автомобиль. Мы хотим обращаться с нашими объектами одинаково — построенными по одному и тому же чертежу, чтобы мы могли взаимодействовать со всеми одинаково!

Теперь, используя ту же аналогию, давайте подумаем о том, какое место занимает «это». Когда машины на конвейере сваривают, режут или придают форму незавершенному автомобилю, они будут считать этот автомобиль «этим». Они также рассматривали следующую машину как «эту». Не имеет значения, была ли первая машина красной или вторая синей — машины будут строить каждую машину по одному и тому же методу. В этом сила «этого», когда дело доходит до создания классов для наших объектов. Это дает нам гибкий, мощный и модульный способ создания объектов с одинаковой общей структурой, чтобы мы могли эффективно манипулировать нашими данными.

Если вы придерживаетесь этих трех правил, значение this должно иметь смысл на практике. Опасность заключается в том, что вы начинаете слишком умно или лениво использовать «это», и его значение теряется в запутанной цепочке объектов. Один из способов избежать этой проблемы — привязать this при первом упоминании. Связывание означает, что this сохранит свое значение из того места, где оно было привязано (его лексическая область видимости в точке связывания). Одним из примеров того, когда привязка может быть полезна, является расширение одного класса из другого. При вызове метода родительского класса, который ссылается на this, дочерний класс в конечном итоге будет использовать родительский контекст this, что может привести к нежелательным результатам.

Понимание базовых концепций контекста и области видимости поможет вам в тонкой настройке кода при работе с объектами. Приложите все усилия, чтобы действительно понять три правила, перечисленные выше, и вы будете на пути к написанию СУХОГО и эффективного JavaScript!