Что такое JavaScript «это»?
this — это ключевое слово JavaScript, которое многие разработчики неправильно понимают, и этот пост призван восполнить этот пробел. Хотя эта статья написана для новичков, но даже опытные разработчики могут использовать ее для переподготовки. this — это специальное ключевое слово-идентификатор, которое автоматически определяется в рамках каждой функции, но то, к чему оно на самом деле относится, — это реальная сделка. Этот пост разделен на три части, и в первой части мы поговорим о том, что такоеthis, а затем мы поговорим о некоторых распространенных заблуждениях о thisи, наконец, мы увидим некоторые особенности JS, связанные с ключевым словом this.
Предпосылка
Я считаю, что обучение похоже на тренировку, и если вы не разогреетесь должным образом, вы можете навредить себе. Поэтому, прежде чем говорить о this, давайте поговорим о нескольких концепциях JavaScript, с которыми вы должны быть знакомы для этой статьи.
1) Переменные, объявленные в глобальной области видимости какvar a = 2;, представляют собой не что иное, как свойства глобального объекта с тем же именем. Да, они не копии друг друга, а друг друга. Чтобы было понятнее, посмотрите на пример ниже, как мы можем получить доступ к значению x как к ключу глобального объекта window. Кроме того, здесь следует отметить, что это работает только с объявлениями, использующими var, а не let/const.
2) Call-site: место, откуда вызывается функция, называется call-site. Обычно поиск сайта вызова состоит из поиска строки, из которой вызывается функция, но это может ввести в заблуждение, поскольку функция может вызываться в нескольких местах кода. Таким образом, наиболее точный способ найти сайт вызова – это найти стек вызовов, а затем посмотреть, откуда была вызвана функция или, другими словами, какой была предыдущая функция. в стеке вызовов. Давайте разберемся с этим на примере.
Что такое this?
this — это привязка, созданная для каждого вызова функции, значение которой зависит от того, как и где вызывается функция. Привязка, сделанная для this, обычно связана с переменными, объявленными с помощью var и JavaScript, работающим в нестрогом режиме. Далее на основе сайта вызова мы можем разделить такие привязки на четыре части, как показано ниже:
- Привязка по умолчанию
- Неявное связывание
- Явная привязка
- новая привязка
Привязка по умолчанию: когда мы обычно вызываем функцию в глобальной области видимости без специального оформления. этовнутри функции привязывается к глобальной области видимости. Да, вы можете получить доступ ко всем глобальным переменным, используя this внутри таких функций. Здесь следует отметить одну вещь: это применимо только для режима non-strict и переменных, определенных с помощью var .
Строгий режим: в этом случае значение this не определено.
let/const: переменные, определенные с помощью let/const, не связаны.
Неявное связывание: когда сайт вызова функции имеет содержащий объект (объект контекста), как указано ниже. Этот объект контекста связан с this внутри этой функции. В приведенном ниже примере obj является объектом контекста, и this привязывается к этому объекту, и все ключи будут доступны внутри функции с помощью this.
Строгий режим. Работает так же, как и режим non-strict.
let/const: неприменимо
Явная привязка. Эта привязка дает нам суперспособность присваивать this чему угодно. Мы можем добиться этого, используя методы call(..) и apply(..). Да, мы можем установить this на объект, переменную, функцию или что-то еще. Но есть загвоздка, null и undefined заменяются глобальным объектом, а примитивы преобразуются в эквивалентные объекты. Независимо от того, что мы передаем в качестве первого аргумента, который будет использоваться в качестве привязки this при вызове функции, мило.
Строгий режим: null и undefined не заменяются глобальным объектом, а примитивы не преобразуются в объекты.
let/const: не поддерживается, когда this привязывается к глобальному объекту (непосредственно или после замены из null или undefined ), но переменные, определенные с помощью let/const, могут быть напрямую переданы как this, и они будут привязаны.
Новая привязка. Это может показаться немного странным по сравнению с остальными правилами привязки. В этом типе привязки, если мы вызываем функцию с ключевым словом new и назначаем ее переменной, то this привязывается к этой переменной. Посмотрите на пример ниже для понимания. Здесь мы присваиваем значение new doSomething() bar, таким образом внутри функции this привязывается к bar.
Строгий режим: без эффекта
let/const: Определенные переменные могут быть обеими let/const, наблюдается одинаковое поведение.
Чем это не является?
Давайте рассмотрим самые распространенные заблуждения о this, которые есть у многих разработчиков, и углубимся в каждое из них. Люди думают, что this в функции означает:
- Сам
- Его объем
СамаМногие разработчики считают, что this относится к самой функции, в которой она вызывается, что неверно. Ниже приведен простой пример, подтверждающий это.
Скорее, правильный способ отслеживать, сколько раз вызывается increase, — это фактически использовать метод call для явного определения ключевого слова this как объекта increase (самого себя). Приведенный ниже пример кода является его рабочим примером.
Его область действияЕще одно известное заблуждение разработчиков состоит в том, что они думают, что это относится к области действия функции. Это сложно, потому что в глобальной области this относится к самой глобальной области, но это довольно ошибочное утверждение, поскольку мы видели, что оно неверно в предыдущем разделе.
Дополнительные функции JavaScript вокруг `this`
Функция bind(): ES5 представила эту функцию, которая помогает явно связать значение this. bind возвращает функцию с this, установленным в качестве первого аргумента bind. Это что-то похожее на call и apply, но разница в том, что когда мы используем bind, функция сохраняет свой контекст, чтобы ее можно было использовать повторно.
Функция стрелки:в этих функциях this сохраняет значение this окружающего лексического контекста. В глобальном коде он будет установлен на глобальный объект. Давайте посмотрим несколько примеров ниже:
this в классах: поведение this в классах и функциях такое же, поскольку классы — это не что иное, как функции под капотом. Тем не менее, я бы посоветовал прочитать здесь, в котором есть несколько угловых случаев. Общим соглашением является переопределение поведения this, чтобы this внутри классов всегда относилось к экземпляру класса. Это обычно наблюдается в компонентах класса React.
this в качестве обработчика DOM: когда функция используется в качестве обработчика событий, ее this устанавливается на элемент, на котором находится прослушиватель. Приведенный ниже код напечатает сам элемент DOM.
