Я искал в Интернете, чтобы узнать, что разработчики JavaScript считают самой запутанной частью языка. Я не подсчитывал, но мог предположить, что замыкания были первыми, а «это» — вторыми. Ключевое слово this было одной из самых сложных для меня концепций при изучении JavaScript. Казалось невозможным понять, какова будет его стоимость. В этой статье объясняется, что такое «это» и как определяется его значение.
Объекты ссылаются
Прежде чем перейти к этому, нам нужно понять одну вещь об объектах. Когда мы создаем переменную с примитивным значением, она создает полностью новое значение. Давайте посмотрим на код, чтобы понять, что я имею в виду.
В этом примере мы видим, что a — это число, тип примитивного значения. Значение переменной b становится значением a. Когда a меняет свое значение, bостается прежним. Это связано с тем, что примитивные значения копируются. Они не ссылаются на исходное значение.
Разработчики-новички на JavaScript часто считают, что объекты ведут себя так же, как примитивные значения. Тем не менее, это не так. На объекты ссылаются, а не копируют.
В этом примере мы видим, что значение c является вновь объявленным объектом. Этот новый объект имеет свойство name со значением «Бобби». Значение переменной d становится переменной c. Когда мы меняем name в объекте, объявленном в c,это также изменяет name на d. Это связано с тем, что на объекты ссылаются, а не копируют. dссылался на тот же объект, который был объявлен в переменной c.
Я призываю вас сделать эти примеры самостоятельно, чтобы вы полностью поняли, что происходит.
this — ссылка на объект.
Если из этой статьи вы узнали только одну вещь, пусть будет так, что значение ‘this’ является ссылкой на объект. Никогда не будет случая, когда this будет чем-то другим, кроме ссылки на объект.
Из этого примера мы видим, что первое «это» ссылается на глобальный объект окна, а второе «это» ссылается на случайный объект.
Изменяется ли «это» в зависимости от того, внутри какого объекта оно находится?
Нет, это не так. Итак, если «это» не ссылается на объект, внутри которого оно находится, на что оно ссылается?
вызовы функций и «это»
Вот тут люди начинают путаться. Каждый раз, когда вызывается функция, создается новая переменная this. В последнем примере «это» в объектах не находится в функции, что означает, что он все равно будет ссылаться на глобальный объект. Что произойдет, если мы создадим функции, которые регистрируют идентификаторы?
Теперь мы получаем ожидаемое. Когда мы вызвали функцию, ее новая переменная this ссылалась не на окно, а на другой объект.
Если при вызове функции создается новая переменная this, ссылается ли this на объект, в котором функция была объявлена?
Если бы это было так, то 1 регистрировался бы каждый раз. Это не где была объявлена функция, представляющая значение this, а какойобъект вызывает функцию. Поскольку первый раз getIdбыл вызван окном, оно регистрирует свойство id окна. firstObjectвызывает getIdво второй раз, поэтому он регистрирует firstObject идентификатор.
Общие сценарии с «этим»
Функции конструктора
Есть несколько ситуаций, когда «это» используется часто. Функции-конструкторы используют его для создания новых объектов.
Когда функция запускается как конструктор с ключевым словом new, создается объект, и this ссылается на новый объект. Просто убедитесь, что используется ключевое слово new, иначе свойства с this будут применены к другому объекту.
Метод вызова и применения
Есть несколько методов функций, которые используют силу этого. Методы call и apply используются для вызова функции при изменении объекта, на который ссылается this.
Из примера видно, что при вызове describePet без вызова this ссылается на объект окна. Когда мы вызываем функцию с аргументом call и pet, 'this' ссылается на pet. Это чрезвычайно полезно, особенно при использовании модулей.
Хотя я не делал пример с apply, просто знайте, что он имеет ту же функциональность с this, что и call. Вы можете найти различия между ними здесь.
Метод привязки
Bind также является методом функции, который изменяет объект, на который ссылается this. Разница в том, что bindсоздает новую функцию, которая не вызывается немедленно.
Каждый раз, когда вызывается greetMichael, this всегда будет ссылаться на person1. Bindчасто используется при работе с обработчиками событий, таких как события кликов.
Важные понятия с «этим»
строгий режим
Если «use strict» находится внутри области действия функции, «this» не будет ссылаться на глобальный объект, но будет неопределенным.
функции толстой стрелки
Функции жирных стрелок, новый синтаксис функций, созданный в ES6, внесли изменения в то, как используется this. Каждый раз, когда вызывается стрелочная функция, она не создает переменную this. Следовательно, this будет ссылаться на все, на что ссылается лексическое окружение функции.
Ресурсы для получения дополнительной информации об этом
«это» — непростая тема в JavaScript. Иногда для того, чтобы это понять, требуются другие точки зрения. Я рекомендую вам взглянуть на эти другие ресурсы, если вы все еще запутались.
- Понять «это с Ясностью и овладеть этим».
2. Понимание ключевого слова this в JavaScript.
Чтобы хорошо использовать, нужно сначала хорошо понять.
