Привет! Прежде чем мы углубимся в привязку обработчиков событий в React, нам нужно сначала понять ключевое слово this.

this ключевое слово - одна из вещей, которая сбивает с толку многих разработчиков. Меня тоже это долго смущало.

В этой статье я постараюсь максимально упростить понимание концепции.

Что это"?

Ключевое слово JavaScript this относится к объекту, которому оно принадлежит.

Он имеет разные значения в зависимости от того, где он используется:

  • В режиме по умолчанию this внутри обычной функции относится к глобальному объекту (т.е. окну в браузере)

  • В строгом режиме this внутри обычной функции undefined.

  • если функция как метод внутри объекта this ссылается на сам объект.

Что происходит, когда мы передаем метод как ссылку на переменную?

Когда мы передаем метод как ссылку на переменную, значение переменной будет обычной функцией.

Строка 8: мы передали метод объекта новой переменной с именем newPlace

строка 9: мы напечатали переменную newPlace.

Значение переменной newPlace - это функция (изображена в строках 10–12). Это обычная функция, поэтому ключевое слово this в функции newPlace () будет относиться к глобальному объекту (в режиме по умолчанию) или undefined (если включен строгий режим)

Привязка

Метод bind () используется для определения области действия ключевого слова this.

→ Без привязки

Примечание: JavaScript назначит область this объекту, предшествующему оператору точки (.) Перед вызовом функции, то есть media.status из приведенного выше примера, и это причина, по которой status вызывается без media, заставляет 'this' потерять свой контекст.

→ С переплетом

Здесь мы явно связали область видимости ключевого слова this функции status () с объектом {platform: ‘medium’}.

Полезные ссылки:

→ метод bind ():



Function.prototype.bind ()
Метод bind () создает новую функцию, при вызове которой для ключевого слова this устанавливается заданное значение с… developer.mozilla.org



Свяжите с помощью React

Если вы создавали компоненты в React и прикрепляли прослушиватели событий, то вы, вероятно, сталкивались с ситуацией использования bind в функциях для передачи области видимости.

В приведенном выше примере мы просто передаем ссылку на this.handleClick прослушивателю событий onClick.

Значение события onClick примерно такое:

ƒ handleClick () {
console.log (это);
}

Это обычная функция.

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

Полезные ссылки:

→ Несколько способов привязки обработчиков событий в React:



Обработка событий - React
Обработка событий с элементами React очень похожа на обработку событий в элементах DOM. Есть некоторый синтаксис… reactjs.org



Резюме

Итак, теперь вы можете определить значение this, следуя этим простым правилам:

  • По умолчанию this относится к глобальному объекту (т.е. окну в браузере).
  • В строгом режиме this не определено.
  • JavaScript назначит область this объекту, предшествующему оператору точки (.) Перед вызовом функции.
  • Когда мы передаем метод как ссылку на переменную, значение переменной будет обычной функцией.
  • Метод bind () используется для определения области действия ключевого слова this.

Спасибо за внимание! Если вам понравилась эта статья, нажмите 👏 кнопку и поделитесь, чтобы помочь другим найти ее! Не стесняйтесь оставлять комментарии 💬 ниже.
Хотите оставить отзыв? Давайте подключимся в Твиттере.