Стрелочные функции — это тикток мира javascript, кажется, все его используют. Это красивее, короче, чем традиционные выражения функций в Javascript, и улучшает читаемость кода. Если стрелочные функции так хороши, то почему все не используют только их, почему мы вообще не отказались от старых традиционных функциональных выражений? Что ж, как мы все знаем, «с большой силой приходит большая ответственность», все может выглядеть блестяще со стороны, но стрелочные функции имеют свои темные секреты, секреты, которые мы собираемся исследовать один за другим. В этой статье мы сначала поймем, как определить стрелочные функции и сравним их определение с традиционными функциями. Затем мы перейдем к темным секретам, то есть к ограничениям и преимуществам стрелочных функций. Давайте погрузимся прямо в.

Стрелочные функции

Как следует из названия, выражения стрелочных функций используют в своем определении стрелку «=›». Вот и все. Пока, я думаю, тогда :p.
Давайте попробуем понять некоторые правила, связанные со стрелочной функцией, и их отличия, сравнив их определение с традиционными функциями.
->Выражение традиционной функции

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

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

Теперь это довольно мало, верно! Давайте сделаем еще один шаг вперед, удалим также все круглые скобки.

Мы сократили нашу функцию до однострочного оператора. Довольно аккуратно Право! Есть некоторые дополнительные правила, которые нам нужно понять, связанные со стрелочными функциями, прежде чем мы закончим часть определения. Мы предприняли множество шагов выше, удалили ключевое слово function, удалили ключевое слово return, фигурные скобки, а затем и круглые скобки, применимо ли это всегда? Нет, есть условия, когда мы можем удалить эти элементы. Давайте посмотрим на них.

  1. Если у нас несколько аргументов в нашей функции или аргумента нет, нам нужно указать круглую скобку, без нее мы увидим ошибку.

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

Это подводит итог нашему обсуждению того, как определить стрелочную функцию, давайте перейдем к темным секретам, не так ли?

Некоторые указатели

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

Стрелочные функции не имеют собственной привязки к этому

Что это вообще значит? Привязка к этому? Прежде чем понять это, я считаю, что нам важно понять, что это такое, и его функциональность в традиционном функциональном выражении.
В Javascript это относится к объекту. Это может быть либо текущий объект, либо глобальный объект. Внутри объектного метода this относится к объекту, внутри традиционной функции this относится к глобальному объекту. Попробуем разобраться на примере.

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

Как видите, при определении функции «printName» в виде выражения стрелки мы получаем неопределенность для обеих переменных. Если вы видите, что мы также печатаем «это», и что мы видим? Это кажется довольно знакомым, не правда ли, это объект окна!
Именно это мы имеем в виду, когда говорим, что стрелочные функции не имеют собственной привязки к this. Они наследуют область своего родителя. «Этот» внутренний информационный объект относится к объекту окна, и это то, что наследует printName, потому что они не имеют никаких условий области видимости, как традиционные выражения. Поскольку «firstName» и «lastName» не были доступны глобальному объекту, отсюда и ошибка. Подводя итог, традиционные функции имеют свой собственный контекст, тогда как стрелочные функции наследуют контекст своего родителя. Не предполагайте, что это всегда будет глобальный объект, это распространенное заблуждение, что «это» внутри стрелочных функций относится к глобальному объекту, он наследует область действия родительского объекта, если область родителя является глобальной, то он глобальный, независимо от того, что является областью действия родительского объекта. Не верите!? Тогда давайте посмотрим на пример.

В первом примере мы видим, что для обеих функций printName, которая является традиционной функцией, ссылается на объект person1, который, в свою очередь, содержит только printName, но то же самое относится и к innerFunction, поскольку она наследует область действия родительской функции. Когда эта внутренняя функция определена как традиционная функция, мы видим, что она привязывается к глобальному объекту, что является ожидаемым поведением для традиционной функции, которая ссылается на область действия глобального объекта.

Различное поведение вызова, привязки и применения

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

«вызов» позволяет нам вызывать метод другого объекта с переданной областью действия объекта. «bind» возвращает привязку метода к переданному объекту. «Применить» демонстрирует поведение, аналогичное вызову. Но можно ли наблюдать подобное поведение со стрелочными функциями? Ну, из того, что мы видели ранее, трудно согласиться с этим. Поскольку это внутри метода объекта указывает на объект окна, это поведение будет сохраняться и для применения, привязки и вызова.

Предостережение при возврате объектов

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

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

Ну вот! Это подводит итог нашему обсуждению стрелочных функций, надеюсь, вы найдете это полезным. Если да, не забудьте похлопать.