Введение
Вы когда-нибудь пытались понять концепцию «это» в javascript? Вы можете быть знакомы с javascript или быть экспертом в написании кода javascript, но иногда, когда дело доходит до понимания контекста, стоящего за «этим», я также отношусь к тем людям, которые иногда не могут объяснить «это». Я надеюсь, что вы найдете эту статью полезной. Я постараюсь подробно объяснить концепцию с примерами.
Ключевое слово this в JavaScript относится к объекту, методом которого является текущая функция. Это переменная с динамической областью действия, что означает, что ее область действия изменяется в зависимости от контекста вызова функции во время выполнения. «это» является ключевой и часто неправильно понимаемой концепцией в JavaScript, поскольку значение может существенно различаться в зависимости от контекста, в котором оно используется.
Различные привязки ключевого слова this
«this» используется в различных контекстах, и на самом деле важно понимать, как работать по-разному. Эта концепция имеет решающее значение для эффективного использования концепции javascript «это». Существует 4 вида креплений:
- Привязка по умолчанию
- Неявное связывание
- Явная привязка
- Использование «нового»
Привязка по умолчанию
Когда термин «это» используется вне функции или в глобальной области видимости в JavaScript, он связан по умолчанию. В данном случае «это» относится к глобальному объекту, который является либо «окном» в браузере, либо «глобальным» в Node.js.
Вот пример привязки по умолчанию в действии:
«Это» в первой строке относится к глобальному объекту, который является объектом окна в браузере. Кроме того, «это» в функции относится к глобальному объекту.
В строгом режиме глобальный объект не определен, а не значение this в глобальной области видимости. Вы можете включить строгий режим, добавив «use strict» в начале вашего кода или внутри функции, как показано во фрагменте ниже.
Неявное связывание
Ключевое слово this в этой привязке относится к объекту, свойством которого является функция. «this» указывает объект, когда функция используется как метод объекта. Объект, свойством которого является функция, определяет значение this.
Возьмем пример,
Функция «greet» является атрибутом объекта «person» в приведенном выше примере. Мы можем получить доступ к свойству name объекта person, вызвав функцию person.greet(), которая устанавливает значение this в методе приветствия для объекта person. В этой ситуации можно увидеть неявное связывание. Неявное связывание иллюстрируется этим.
Давайте посмотрим на другой пример:
В этом примере объект «instructor» имеет функцию «sayName», установленную в качестве свойства, и когда вызывается instructor.say() , объект «инструктор» задается как значение «this» в функции «sayName». Это еще один пример неявного связывания.
Явная привязка
Независимо от того, как и где функция вызывается в коде, вы можете явно установить значение «this» для вызова с использованием метода явной привязки.
В JavaScript существует три метода явного связывания: «вызов», «применить» и «bind».
Вы можете вызвать функцию с помощью метода «call», а также можете установить значение «this» для этого вызова функции. Значение, которое вы хотите установить для «this», является первым аргументом метода вызова, а остальные аргументы передаются функции по отдельности.
Позвольте мне поделиться одним примером, связанным со звонком:
Метод «call» используется в приведенном выше примере для вызова функции «sayName», а значение «this» установлено равным объект инструктора.
Аналогичным методу call является метод apply, за исключением того, что он принимает массив аргументов, а не отдельные аргументы.
Позвольте мне поделиться одним примером, связанным с применением:
В приведенном выше примере метод «apply» использовался для вызова функции sayName и установки значения «this» для «инструктора». объект. Аргументы функции передаются в виде массива.
Метод «bind» создает новую функцию, используя первый аргумент, переданный «bind», в качестве значения «this». Аргумент, указанный для «bind», устанавливается как значение «this» в исходной функции при последующем вызове новой функции.
Вот пример привязки:
В приведенном выше примере метод «bind» использовался для создания новой функции «instructorSayName» с использованием «this», установленного на «инструктор». Когда функция «instructorSayName» была вызвана позже, значение «this» внутри функции «sayName» было установлено равным «инструктор», как если бы мы использовали «вызов» или «применить».
Новая привязка
Процесс, посредством которого ключевое слово «this» привязывается к вновь созданному объекту, когда функция вызывается с оператором «new», называется «new ».
Когда функция вызывается с помощью оператора «new», создается новый объект, и ключевое слово «this» внутри функции устанавливается для этого вновь созданного объекта. Кроме того, прототип вновь созданного объекта устанавливается в свойство прототипа функции.
Возьмем, к примеру:
В приведенном выше примере новый объект создается с помощью оператора «new» для вызова функции «Person». Свойства «имя» и «приветствовать» добавляются к объекту, а ключевое слово «this» в «Person» устанавливается для вновь сгенерированного объекта.
Важно иметь в виду, что вновь созданный объект возвращается без необходимости в операторе «return», когда функция вызывается с использованием «нового» оператора. Если используется оператор return и он возвращает объект, этот объект будет возвращен вместо вновь созданного объекта. Если используется оператор return и он возвращает значение, не являющееся объектом, вновь созданный объект будет возвращен в любом случае.
Функция стрелки и «это»
Стрелочные функции JavaScript обеспечивают быстрый способ написания анонимных функций (функций без имени). То, как они связывают ключевое слово this, отличает их от обычных функциональных выражений.
Значение this в обычных функциональных выражениях зависит от того, как вызывается функция. Как объяснялось ранее, его можно задать явно с помощью команд «вызов», «применить» или «связать» или установить неявно в зависимости от объекта, содержащего функцию.
Однако в стрелочных функциях контекст, в котором была сгенерирована стрелочная функция, а не то, как она вызывается, определяет значение this. Это означает, что если стрелочная функция не находится внутри другой функции, ключевое слово this внутри стрелочной функции всегда будет ссылаться на значение this внешней функции или глобального объекта.
Проще говоря, стрелочные функции не имеют собственного значения this; вместо этого они наследуют значение this от объемлющей области видимости.
Например:
Вот еще один пример стрелочной функции, которая ссылается на ключевое слово this внешней функции:
В приведенном выше примере функция «greet» в этом примере была определена как функция стрелки внутри функции «Person». Значение «this» в стрелочной функции соответствовало значению «this» функции «Person», которое было присвоено вновь сгенерированному объекту «elie », когда была вызвана функция «приветствовать».
Следует отметить, что использование «вызова», «применения» или «привязки» не может изменить привязку «этого» в стрелочных функциях. Независимо от метода, используемого для вызова функции, значение this в стрелочной функции остается неизменным. Это делает стрелочные функции особенно полезными для обратных вызовов и обработчиков событий, где значение this часто неожиданно меняется.
Заключение
В заключение, изучение ключевого слова «this» в JavaScript является важным шагом на пути к тому, чтобы стать настоящим экспертом по JavaScript. Вы сможете писать код, который будет не только более эффективным, но и более элегантным и динамичным, если у вас будет полное понимание связывания по умолчанию, неявного связывания, явного связывания и нового связывания, которые являются четырьмя основными связываниями «этого». . Я надеюсь, что смог ясно объяснить концепцию, и надеюсь, вам понравилась эта статья.
