Стрелочные функции чище и проще, чем их длинные аналоги, но прежде чем их использовать, необходимо знать, как они работают. Синтаксис стрелочных функций появился вместе с выпуском ECMAScript 2015, также известного как ES6. В настоящее время стрелочные функции стали любимой возможностью многих программистов на JavaScript. Эта любовь к стрелочным функциям обусловлена лаконичным синтаксисом и прямолинейным поведением ключевого слова "this".
Но у стрелочных функций есть некоторые недостатки. Узнайте о ключевых различиях между стрелочными функциями и обычными функциями и узнайте, почему в большинстве случаев лучше придерживаться обычных функций.
Рассмотрим следующий пример кода на JavaScript:
const doubleNumbers = (numbers) => {
numbers.map(n => n * 2)
}
const halveNumbers = (numbers) => {
numbers.map(n => n / 2)
}
const sumNumbers = (numbers) => {
numbers.reduce((sum, n) => {
return sum + n;
}, 0)
}
const numbers = [1, 20, 300, 700, 1500]
const doubled = doubleNumbers(numbers)
console.log(halveNumbers(doubled))
console.log(sumNumbers(numbers))
В приведенном выше блоке кода важный код находится внизу. Все вспомогательные функции определены перед точкой выполнения. Создание ваших функций JavaScript вверху файла может быть неудобным, потому что вам придется прокручивать вниз, чтобы увидеть реальный код, выполняющий работу.
Если вы переместите вспомогательные функции вниз и реальный код вверх, вы получите ошибку ссылки. Время выполнения рассматривает функцию как переменную. Таким образом, вы должны сначала определить ее, прежде чем обращаться или вызывать. Но если вы преобразуете все стрелочные функции в обычные функции (с использованием ключевого слова function), то ваш код будет работать нормально. В то же время важный код останется вверху, где его легко найти.
Это одна из основных проблем при использовании стрелочных функций. Они не проявляют никакого поведения поднятия. Другими словами, вы должны определить их перед тем местом, где вы собираетесь использовать их. С другой стороны, обычные функции можно поднимать.
С другой стороны, стрелочные функции присваиваются переменным. Для новичка это может запутать вас, заставив вас думать, что код - это переменная, а не функция.
Сравните две функции ниже:
const halveNumbers = (numbers) => {
return numbers.map(n => n / 2)
}
function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}
На первый взгляд вы легко можете определить, что второй блок кода - это функция. Синтаксис четко указывает, что код - это функция. Однако первый блок неоднозначен - вы можете не так легко сказать, переменная это или функция.
Рассмотрим следующий объект:
const person = {
firstName: "Кайл",
lastName: "Кук",
printName: () => {
console.log(`${this.firstName} ${this.lastName}`)
}
}
person.printName()
Если вы выполните код, вы заметите, что браузер выводит undefined как для имени, так и для фамилии. Поскольку мы используем стрелочную функцию, ключевое слово this соответствует объекту window. Кроме того, там нет определенных свойств firstName или lastName.
Чтобы решить эту проблему, вам нужно использовать обычную функцию:
const person = {
firstName: "Кайл",
lastName: "Кук",
printName: function() {
console.log(`${this.firstName} ${this.lastName}`)
}
}
person.printName()
Это сработает нормально, потому что this относится к объекту person. Если вы собираетесь часто заниматься таким объектно-ориентированным программированием, то вам нужно убедиться, что вы используете обычные функции. Стрелочные функции не будут работать.
Когда использовать стрелочные функции Используйте стрелочные функции в основном там, где вам нужна анонимная функция. Пример такого сценария - это работа с функцией обратного вызова. Лучше использовать стрелочную функцию при написании обратного вызова, потому что синтаксис намного проще, чем написание полной функции.
Сравните эти две функции и решите, что более просто:
function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}
function halveNumbers(numbers) {
return numbers.map(function(n) {
return n / 2
})
}
В обоих случаях передается функция обратного вызова методу map(). Но первый обратный вызов - это стрелочная функция, в то время как второй - полноценная функция. Вы видите, как первая функция занимает меньше строк кода, чем вторая функция: три против пяти.
Другой момент, когда стоит использовать стрелочные функции, - это когда вам нужно работать с определенным синтаксисом "this". Объект "this" будет изменяться в зависимости от того, используете ли вы обычные функции или стрелочные функции для конкретных вещей.
В следующем блоке кода регистрируются два слушателя событий "click" на объекте document. В первом случае используется обычная функция в качестве обратного вызова, в то время как во втором случае используется стрелочная функция. Внутри обоих обратных вызовов код регистрирует объект выполнения (this) и цель события:
document.addEventListener("click", function(e) {
console.log("FUNCTION", this, e.target)
})
document.addEventListener("click", (e) => {
console.log("ARROW", this, e.target)
})
Если вы запустите этот скрипт, вы заметите, что ссылка "this" различается для обоих случаев. Для обычной функции это свойство this ссылается на документ, что совпадает с свойством e.target. Но для стрелочной функции это свойство this ссылается на объект window.
Когда вы используете обычную функцию в качестве обратного вызова, то this будет относиться к элементу, где мы вызываем событие. Но когда вы используете стрелочную функцию, то ключевое слово this по умолчанию ссылается на объект window.
Узнайте больше о стрелочных функциях по сравнению с обычными функциями Существует несколько других тонких различий между обычными функциями и стрелочными функциями. Овладение обоими типами функций является основой для достижения мастерства в JavaScript. Узнайте, когда использовать одно, а когда другое; тогда вы поймете, какие последствия использования обычной функции или стрелочной функции в вашем JavaScript.
Добавить комментарий