Если вы никогда не использовали компоненты класса в React, ключевое слово «это» может быть вам чуждым. Но понимание этого придаст вам больше уверенности в вашем письме, потому что в компонентах класса все еще есть большие куски кода, поэтому, даже если вы не предпочитаете их использовать, важно их изучить. Кроме того, я думаю, что это также улучшит ваши знания в области охвата.

В javascript «контекст» относится к объекту, над которым работает функция, также известному как «контекст выполнения». Он определяет значение ключевого слова this внутри функции и влияет на доступ к методам и свойствам. Например, механизм javascript создает глобальный контекст выполнения, в котором хранятся глобальные функции, и они имеют доступ к глобальным переменным. А для локальных функций у них есть собственный локальный контекст выполнения. И значение «этого» у них обоих разное. Потому что он ссылается на область, в которой они в настоящее время находятся.

localFunction() не находится внутри какого-либо объекта, поэтому можно сделать вывод, что она находится внутри глобального объекта, который по умолчанию называется окном.

localFunction() хранится в глобальном контексте выполнения, что означает, что это относится к глобальной области окна. Таким образом, использование this внутри функции будет указывать на область действия глобальной переменной. Следовательно, вывод будет;

I am a local variable
I am a global variable

Вот еще один пример; У нас есть объект с именем «человек».

он имеет одну локальную переменную и одну функцию внутри. Что бы вы сказали о контексте выполнения sayHello()? Это в глобальном контексте выполнения или в локальном?

В локальном, потому что в JavaScript «контекст» относится к объекту, с которым работает функция

Это ключевое слово внутри sayHello() относится к объекту человека. Он будет указывать на объект, в котором он находится в данный момент.

  • Использование здесь указывает на поиск переменных с именем «имя» внутри объекта человека.
  • Если вы не укажете это ключевое слово, он будет искать переменную с именем «имя» в глобальном объекте или объекте окна. Однако у нас нет такой переменной, поэтому он вернет ошибку ссылки, потому что не видит никакой переменной за пределами объекта с именем name.

Если вы посмотрите на строку 10, мы создаем новую переменную с именем приветствие и присваиваем ей функцию sayHello(), но по какой-то причине она возвращает

"Hello, my name is undefined"

Но работает так, как задумано, когда мы используем bind(person). Почему это?

Функция приветствия не знает, что такое this.name, поскольку значение this зависит от того, как вызывается функция, а не от того, где она определена.

При первом вызове person.sayHello() функция вызывается как метод объекта person, поэтому this относится к объекту person, а this.name — «John Doe».

Однако во втором вызове Greeting() функция не вызывается как метод объекта, поэтому это относится к глобальному объекту. В среде браузера глобальным объектом является окно, поэтому this.name не определено.

Другими словами, контекст функции может меняться в зависимости от того, как она вызывается и с каким объектом она связана. Например, когда функция называется методом объекта, контекстом является сам объект, а значение this в функции относится к этому объекту. С другой стороны, когда функция вызывается как отдельная функция, контекст является глобальным объектом (в браузере это объект окна). Используя bind(), мы можем указать область выполнения.

Вы можете спросить, хорошо, а что, если мы создадим глобальную переменную с именем name вне объекта, будет ли это доступно? Это зависит от того, потому что, если вы используете var для его объявления, он будет сохранен в объекте окна, но не при назначении с помощью const и let, потому что они не будут сохранены в объекте окна.

В современном JavaScript считается лучшей практикой использовать let или const для объявления переменных вместо старого var, а переменные, объявленные с помощью let или const, не присоединяются к глобальному объекту.

  • const и let имеют блочную область видимости
  • var находится в области действия функции, то есть он поднимается на верхний уровень и доступен из любого места.

Резюме

  • это ссылка на текущий контекст, который определяет значение this внутри функции.
  • Значение this определяется во время выполнения в зависимости от контекста, в котором вызывается функция.
  • В глобальной области это относится к глобальному объекту, обычно к окну в среде веб-браузера.
  • Когда функция вызывается как метод объекта, это относится к объекту, для которого вызывается метод.
  • это полезно для доступа к свойствам и методам объекта, а также для совместного использования свойств и методов между объектами.
  • В компонентах класса в React это относится к экземпляру компонента и используется для доступа к состоянию и свойствам компонента, а также к методам компонента.
  • При использовании этого важно соблюдать осторожность, так как его значение может меняться в зависимости от контекста, в котором вызывается функция. Чтобы гарантировать, что это всегда относится к нужному объекту, вы можете использовать стрелочные функции, которые имеют лексическую область видимости этого значения.