Вчера я проходил обучение по HackerRank за 10 дней Javascript и остановился на постановке проблемы.

Постановка задачи была слишком простой для решения (возможно, поэтому она была предназначена для новичков 😜)

Постановка проблемы:

Поначалу постановка задачи выглядит очень тривиальной, и на самом деле это так.

Если вы не очень опытный и неопытный JS-разработчик, то совершите ту же ошибку, что и я.

Вы можете узнать свои навыки, если обнаружите / не найдете неправильный код.

Я верю, как и я, вы знаете, в чем проблема. В какой-то момент в вашей жизни разработки js вы столкнулись с этим, и вам просто нужно было напомнить о том, как функции ограничены.

Вскоре я обнаружил ошибку, когда увидел результат выполнения и зарегистрировал консоль «this» как метод отладки, тот самый Brahmāstr (абсолютное оружие) разработчиков 😆.

Если вы все еще спрашиваете, почему это неправильно, позвольте мне вам это объяснить.

описание проблемы

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

Функция стрелки

Есть множество разных способов, которыми стрелочные функции отличаются от обычных / обычных функций (не только синтаксисом).

  1. У стрелочных функций нет собственных this, arguments, super, .prototype.
  2. Стрелочные функции нельзя использовать в качестве конструкторов, следовательно, нельзя использовать с ключевым словом new.
  3. Так как стрелочные функции следуют за обычным поиском переменных, а также у них нет своей собственной this, this в стрелочной функции ищется во включающей области (это область, в которой стрелочная функция вызывается).
  4. Учитывая, что this происходит из окружающего лексического контекста, правила строгого режима в отношении this игнорируются.
  5. Стрелочные функции не могут быть привязаны к каким-либо другим областям действия, поскольку у них нет собственных привязок this, следовательно, .apply(), .call(), .bind() не применяются (учитывая их основное использование в отношении this), они просто передадут параметр (игнорируя любое значение, передаваемое в this).
  6. Ключевое слово yield не может использоваться в теле стрелочной функции (кроме случаев, когда это разрешено в функциях, дополнительно вложенных в него). Как следствие, стрелочные функции нельзя использовать в качестве генераторов. (Ссылка из MDN)

Так что же все это значит в нашем выпуске?

Просто для объяснения я сохранил это в переменной abc и передал в качестве параметра функции области. Это помогает нам понять, что параметры object и this равны.

TL; DR: ' this »в стрелочной функции не задан как область ее родительского объекта, как в обычных функциях, а установлен как ссылка на область, в которой она вызывается. (т.е. область действия блока if)

РЕШЕНИЕ

Обычная функция

Чем работают обычные функции и чем отличаются от стрелочных, помимо очевидной синтаксической разницы?

  1. Обычные функции имеют собственные привязки this, arguments, super, .prototype.
  2. Эти функции могут использоваться как конструкторы, поскольку у них есть собственные привязки, благодаря которым их можно использовать с ключевым словом new.
  3. this в контексте тела функции, имеют немного другое поведение при использовании в strict режиме по сравнению с тем, когда используется не в строгом режиме.
  4. Если не используется в режиме strict, тогда значение this функции устанавливается в контексте, в котором функция объявлена. То есть, если функция вызывается как метод объекта, ее this устанавливается для объекта, вызывается метод. (Не поняли? См. Приведенные ниже коды, извлеченные из MDN).

Суть

5. Когда функция используется как конструктор (с ключевым словом new), ее this привязывается к новому конструируемому объекту.

6. При использовании в строгом режиме значение this функции устанавливается на undefined. (Не поняли? См. Приведенный ниже код, извлеченный из MDN).

Примечание. Если функция вызывается как метод объекта, ее this устанавливается на объект, для которого вызывается метод, даже если он находится в строгом режиме.

"Суть"

7. Значение this может быть задано пользователем при вызове функции с помощью .apply(), .call().
(Не поняли? См. коды ниже)

Примечание. Что в нестрогом режиме, с вызовом и применением, если значение, переданное как не объект, будет предпринята попытка преобразовать его в объект с помощью внутренней операции toObject. Таким образом, если переданное значение является примитивом, например 7 или 'foo', оно будет преобразовано в объект с использованием связанного конструктора, число 7 преобразуется с помощью new Number (7), а строка 'foo' - с помощью new String ('foo' ).

Суть

8. Использование .bind() создает новую функцию, которая имеет то же тело и область видимости, что и функция, которую она вызывает, но значение this постоянно устанавливается равным значению параметра .bind(), а затем возвращает новую функцию. (Еще один момент в примере ниже, посмотрите примеры ниже)

Суть

9. Функция, используемая как геттер или сеттер, имеет this привязку к объекту, от которого устанавливается или получается свойство. (Не поняли? См. Приведенный ниже код из MDN).

Суть

TL; DR: значение «this» функции устанавливается в контексте, в котором функция вызывается. То есть, если функция вызывается как метод объекта, ее «this» устанавливается для объекта, которым этот метод является призвал.

На этом я заканчиваю свою статью. Любые предложения приветствуются.

Свяжитесь со мной по: