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

Синтаксис стрелочных функций появился с выпуском ECMAScript 2015, также известного как ES6. Сегодня стрелочные функции стали любимой функцией многих программистов на JavaScript. Эта любовь к стрелочным функциям связана с кратким синтаксисом и простым поведением ключевого слова this.

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

1. Вы должны определить функцию стрелки перед ее использованием

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

Например, рассмотрим следующий код JavaScript:

instagram viewer 
константа doubleNumbers = (числа) { 
 числа.карта(н => п * 2)
}
константа половинные числа = (числа) { 
 числа.карта(н => н / 2)
}


константа sumNumbers = (числа) { 
 числа.уменьшить((сумма, н) => { 
возвращаться сумма + п; 
 }, 0)
}
константа числа = [1, 20, 300, 700, 1500]
константа удвоенный = doubleNumbers (числа)
консоль.log (halveNumbers (удвоенный))
консоль.log (sumNumbers (числа))

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

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

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

2. Функции стрелок могут сбивать с толку некоторых людей

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

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

Сравните две функции ниже:

константа половинные числа = (числа) => {
возвращаться числа.карта(н => н / 2)
}
функцияполовинные числа(числа) { 
возвращаться числа.карта(н => н / 2)
}

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

3. Вы не можете использовать стрелочные функции в качестве методов

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

Рассмотрим следующий объект:

константа человек = {
 имя: "Кайл",
 фамилия: "Готовить",
 имя печати: () => {
консоль.бревно(`${этот.имя}``${этот.фамилия}` )
 }
}
человек.printName()

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

Чтобы решить эту проблему, вам нужно вместо этого использовать обычную функцию:

константа человек = {
 имя: "Кайл",
 фамилия: "Готовить",
 имя печати: функция() {
консоль.бревно(`${этот.имя}``${этот.фамилия}` )
 }
}
человек.printName()

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

Когда использовать стрелочные функции

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

Сравните эти два и решите, что проще:

функцияполовинные числа(числа) {
возвращаться числа.карта(н => н / 2)
}
функцияполовинные числа(числа) {
возвращаться числа.карта(функция(н) {
возвращаться н / 2
 })
}

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

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

Следующий блок кода регистрирует два прослушивателя событий «щелчка» в объекте документа. Первый экземпляр использует обычную функцию в качестве обратного вызова, а второй использует функцию стрелки. Внутри обоих обратных вызовов код регистрирует объект выполнения (это) и цель события:

документ.addEventListener("щелкнуть", функция(е) {
консоль.бревно("ФУНКЦИЯ", этот, э.цель)
})
документ.addEventListener("щелкнуть", (д) ​​=> {
консоль.бревно("СТРЕЛКА", этот, э.цель)
})

Если вы запустите этот сценарий, вы заметите, что эта ссылка для обоих отличается. Для обычной функции это свойство ссылается на документ, который совпадает с e.target свойство. Но для функции стрелки это ссылка на объект окна.

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

Узнайте больше о стрелочных функциях и обычных функциях

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