Привет народ🌼! Эта статья расскажет вам об аномалиях в стрелочных функциях JavaScript. Предварительные условия перед прочтением этой статьи:

  1. Синтаксис стрелочных функций
  2. это в JS

Лично я использую функцию стрелки JS почти каждый день, и, думаю, многие разработчики так и поступают. Это синтаксис - один из лучших синтаксисов языка JS. Функция стрелки упростила жизнь разработчикам, но сегодня мы поговорим о ее подводных камнях! 🐞

Связывание аргументов🦋

Предположим, мы хотим определить функцию, которая вычисляет сумму любого количества переданных ей аргументов. Лучшая идея - использовать перегрузку функций (возможность определять функцию так, чтобы ее можно было вызывать с разными формами или количеством аргументов).

Функции JavaScript имеют встроенный объект, подобный массиву, который называется аргументами. Он содержит все аргументы, переданные функции.

Его вывод выглядит так:

Давайте определим функцию sum (), используя регулярное функциональное выражение -

Вызов sum () с разными аргументами -

Давайте воспроизведем сумму (), используя синтаксис стрелочной функции:

Когда вы сейчас тестируете эту функцию, она выдает Reference Error и жалуется, что arguments не определен.

Что в этом плохого ?? 🎃

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

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

Приведенный выше код будет работать!

Есть ли у нас варианты получше ?? 🐰

Да! Поздоровайтесь с rest parameters. С rest parameters мы можем собрать любое количество аргументов в массив и делать с ними все, что захотим.

Примечание. Остальные параметры должны находиться в последнем аргументе. Это потому, что он собирает все remaining / excess аргументы в массив. Таким образом, наличие такой функции вызовет ошибку -

const sum = (a,…args, c) => {
       .....
       .....
       return
}

Конструкторские функции🐘

Обычная функция JavaScript может быть вызвана с ключевым словом new, для которого функция ведет себя как конструктор класса для создания новых объектов экземпляра.

Что, если я сделаю то же самое со стрелкой ??

Выдает ошибку - prototype стрелочной функции undefined.

Стрелочные функции никогда не могут быть вызваны с ключевым словом new, потому что у них нет метода [[Construct]]. Следовательно, свойство prototype также не существует для стрелочных функций.

это💭🎪

В выражении регулярной функции это относится к значениям, основанным на контексте, в котором функция вызывается. В функции стрелки значение this зависит от лексической области видимости👻.

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

  1. Метод fullName вызывается объектом person, поэтому контекстом этого метода является человек объект. Таким образом, значением this внутри метода является объект person.
  2. Если функция вызывается глобально, ее контекст - это окно, поэтому значение this внутри этой функции - это объект окна.

Область действия. Область действия определяет видимость переменных. Это связано с функциями. Посмотрим как !!

1. Предположим, вы инициализируете переменную с помощью «var» внутри функции. Вы не можете получить доступ к этой переменной вне функции.

2. Но если внутри родительской функции есть функции, тогда внутренняя функция может получить доступ к переменной родительской функции. И эта переменная считается находящейся в области видимости.

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

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

В приведенном выше примере следует отметить следующие моменты:

  1. console.log (this) внутри метода fullName печатает объект person, потому что метод fullName вызывается объектом person,, поэтому контекст этого метода - человек объект.
  2. console.log (this) внутри стрелки, функция inner печатает объект person , потому что this внутри стрелочной функции берет свое значение из лексической области видимости, то есть из родительского окружения . в своем родительском окружении (fullName) это относится к объекту person.

Давайте возьмем пример и поймем, в чем проблема со стрелочной функцией здесь -

В приведенном выше примере мы заменили обычную функцию стрелочной функцией. Вот почему логирование this возвращает объект окна!

Стрелочные функции не привязываются this к вызывающему их объекту. Они просто используют значение this в той области, в которой они были определены. В данном случае это глобальный объект. Значит, стрелочные функции непригодны для объектных методов!

Повторяющиеся параметры🐯

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

Воспроизведите приведенный выше пример с помощью функции стрелки -

Это вызовет ошибку - Uncaught SyntaxError: повторяющееся имя параметра недопустимо в этом контексте

В отличие от обычных функций, стрелочные функции не допускают дублирования параметров. Дублирование параметров вызовет выдачу Syntax Error.

Если вы думаете, что этот контент принес вам какую-то пользу, вы можете подписаться на меня на Medium, чтобы получить больше такого контента.

Спасибо за чтение! 🌺🙏