Преобразуйте свой код с помощью магии «этого» в JavaScript

Введение

Готовы ли вы погрузиться в увлекательный мир JavaScript и узнать о секретной силе ключевого слова «this»? Приготовьтесь к удивительному путешествию по интересному царству «этого», где вы раскроете причины его действий и осознаете всю мощь своего кода. Это руководство с увлекательными примерами и кристально чистыми объяснениями отправит вас в захватывающее путешествие по различным привязкам «этого». К тому времени, когда это путешествие закончится, вы будете готовы справиться с любой трудностью программирования, которая встретится на вашем пути, и у вас будет уверенность в себе для создания надежных и масштабируемых систем. Так что без дальнейших церемоний, застегните свои кодовые сапоги и давайте отправимся в путешествие по неизведанным территориям ключевого слова «это»!

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

Привязки «это»

Ключевое слово this имеет четыре основных привязки в JavaScript: привязку по умолчанию, неявную привязку, явную привязку и новую привязку. Понимание этих привязок необходимо для эффективного использования ключевого слова «this» в JavaScript, поскольку каждая из них указывает, как «this» следует использовать в конкретном контексте.

1. Привязка по умолчанию

Когда термин «это» используется вне функции или в глобальной области видимости в JavaScript, он связан по умолчанию. В данном случае «это» относится к глобальному объекту, который является либо «окном» в браузере, либо «глобальным» в Node.js.

Вот пример привязки по умолчанию в действии:

Как видно из первого оператора console.log, ключевое слово this в приведенном выше примере относится к глобальному объекту, когда он используется вне какой-либо функции. Второе предложение console.log демонстрирует, что когда оно используется внутри функции logThis, оно также относится к глобальному объекту.

Важно помнить, что в строгом режиме глобальный объект не определен, а не значение «это» в глобальной области видимости. Вы можете включить строгий режим, добавив «use strict» в начале вашего кода или внутри функции, как показано ниже.

2. Неявное связывание

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

Возьмем, к примеру,

Функция «greet» является атрибутом объекта «person» в приведенном выше примере. Мы можем получить доступ к свойству name объекта person, вызвав функцию person.greet(), которая устанавливает значение this в методе приветствия для объекта person. В этой ситуации можно увидеть неявное связывание. Неявное связывание иллюстрируется этим.

Давайте посмотрим на другой пример:

В этом примере объект «instructor» имеет функцию «sayName», установленную в качестве свойства, и когда вызывается instructor.say() , объект «инструктор» задается как значение «this» в функции «sayName». Это еще один пример неявного связывания.

3. Явное связывание

Независимо от того, как и где функция вызывается в коде, вы можете явно установить значение «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» было установлено равным «инструктор», как если бы мы использовали «вызов» или «применить».

4. Новая привязка

Процесс, посредством которого ключевое слово «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. Эта необходимая, но часто сбивающая с толку концепция может создать или сломать ваш код и является ключом к использованию всех возможностей языка. Вы сможете писать код, который будет не только более эффективным, но и более элегантным и динамичным, если у вас будет полное понимание связывания по умолчанию, неявного связывания, явного связывания и нового связывания, которые являются четырьмя основными связываниями «этого». . Возможность разрабатывать гибкий, адаптивный и масштабируемый код, который может расти и развиваться по мере изменения ваших проектов и требований, позволит вам справиться с любой задачей, которая встретится вам на пути. Итак, используйте ключевое слово «это», освойте его и станьте настоящим ниндзя JavaScript!