Привет народ🌼! Эта статья расскажет вам об аномалиях в стрелочных функциях JavaScript. Предварительные условия перед прочтением этой статьи:
Лично я использую функцию стрелки 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, оно относится к объекту, которому принадлежит функция.
- Метод fullName вызывается объектом person, поэтому контекстом этого метода является человек объект. Таким образом, значением this внутри метода является объект person.
- Если функция вызывается глобально, ее контекст - это окно, поэтому значение this внутри этой функции - это объект окна.
Область действия. Область действия определяет видимость переменных. Это связано с функциями. Посмотрим как !!
1. Предположим, вы инициализируете переменную с помощью «var» внутри функции. Вы не можете получить доступ к этой переменной вне функции.
2. Но если внутри родительской функции есть функции, тогда внутренняя функция может получить доступ к переменной родительской функции. И эта переменная считается находящейся в области видимости.
Лексическая область видимости означает, что во вложенной группе функций внутренние функции имеют доступ к переменным и другим ресурсам своей родительской области.
this внутри стрелочной функции принимает значение из лексической области видимости, то есть из родительского окружения.
В приведенном выше примере следует отметить следующие моменты:
- console.log (this) внутри метода fullName печатает объект person, потому что метод fullName вызывается объектом person,, поэтому контекст этого метода - человек объект.
- console.log (this) внутри стрелки, функция inner печатает объект person , потому что this внутри стрелочной функции берет свое значение из лексической области видимости, то есть из родительского окружения . в своем родительском окружении (fullName) это относится к объекту person.
Давайте возьмем пример и поймем, в чем проблема со стрелочной функцией здесь -
В приведенном выше примере мы заменили обычную функцию стрелочной функцией. Вот почему логирование this возвращает объект окна!
Стрелочные функции не привязываются this
к вызывающему их объекту. Они просто используют значение this
в той области, в которой они были определены. В данном случае это глобальный объект. Значит, стрелочные функции непригодны для объектных методов!
Повторяющиеся параметры🐯
Параметр first
повторяется. Ему присваивается значение третьего аргумента, переданного в вызов функции, который полностью переопределяет первый переданный аргумент.
Воспроизведите приведенный выше пример с помощью функции стрелки -
Это вызовет ошибку - Uncaught SyntaxError: повторяющееся имя параметра недопустимо в этом контексте
В отличие от обычных функций, стрелочные функции не допускают дублирования параметров. Дублирование параметров вызовет выдачу
Syntax Error
.
Если вы думаете, что этот контент принес вам какую-то пользу, вы можете подписаться на меня на Medium, чтобы получить больше такого контента.
Спасибо за чтение! 🌺🙏