This в JavaScript

This в js является камнем преткновения начинающих разработчиков, все им пользуются, но до конца мало кто понимает, что означает данное ключевое слово в той или иной ситуации. 

Во многих языках программирования this привязан к объекту, но в js это не так, this в js зависит от контекста вызова функции, то как и где была вызвана функция.

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

Если функция вызвана в глобальной области, то this будет указывать на глобальный объект в нестрогом режиме и undefined в строгом режиме работы интерпретатора.

Функции в javascript являются объектами и у них есть свои собственные методы, например, очень полезные для указания this — call, apply и bind, по сути они нужны для одной и той же цели, явно указать this. Рассмотрим метод call для примера. Первым аргументом нужно передать на что будет указывать this. Явная передача this гарантирует, что именно на переданный контекст будет указывать this. Все очень просто.

Функция является методом объекта. Если функцию вызвать как метод объекта, то this будет указывать на тот объект, на котором был вызван метод. Для этого нужно определить функцию внутри объекта.

Если функция была вызвана с оператором New, то this будет указывать на созданный объект, с помощью функции конструктора.

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

Зная эти четыре правила, определить на что указывает this не составит труда. this — очень мощное средство и нужно уметь с ним работать. 

Читайте также:

Зачем вам аккаунт-менеджер

(с) “Ну ты же аккаунты в Инстаграме ведешь?” Мама нашего аккаунт-менеджера Валерии   Впервые обращаясь в рекламное агентство, клиенты задают…

Подробнее
#Интересно

Необходимость семантической верстки и доступности

  Вместе с понятием юзабилити (usability) не так давно появилось понятие accessibility, или доступность для web-приложений. Accessibility — этот термин…

Подробнее
#Разработка

Digital 20.20

  Тренды не меняются раз в год, под куранты, но в преддверии нового десятилетия все говорят о трендах будущего года….

Подробнее
#Интересно

SEO или контекст?

Если бы нам давали по рублю за каждый вопрос “Что порекомендуете, SEO, или контекст?”, Дональд Трамп уже плакал бы горючими…

Подробнее
#Контекст

React-компоненты

React — очень популярная UI библиотека, она отвечает только за часть view в модели MVC (Model-View-Controller — «Модель-Представление-Контроллер»). Создана при…

Подробнее
#Разработка

This в JavaScript

This в js является камнем преткновения начинающих разработчиков, все им пользуются, но до конца мало кто понимает, что означает данное…

Подробнее
#Разработка

Знак судьбы или таргет?

Уверена, все оказывались в такой ситуации: разговариваете с друзьями о том, что хотите щенка, достаете из кармана телефон, открываете Instagram,…

Подробнее
#Таргет

Почему мы “топим” за новинки?

Если мы сотрудничали в 2019 году, значит мы предлагали вам разработать сайт-квиз. Неважно, из какой вы сферы — магазин удобрений,…

Подробнее
#Интересно

Как бренды и бизнес адаптируются к карантину

  Раз уж случилось непредвиденное, и всех бизнесов коснулось то, что нельзя называть, предлагаем посмотреть на то, что предпринимают Ваши…

Подробнее
#Интересно

“1 ключевая фраза — 1 объявление” в контекстной рекламе

При настройке рекламной кампании ключевые фразы можно делить на группы 2 способами: По принципу “1 ключевая фраза — 1 объявление”….

Подробнее
#Контекст