6 различий между стрелочными функциями и обычными функциями в JavaScript

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

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

1. Синтаксические различия

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

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

константа добавить = (а, б) => а + б;

В этом примере добавлять функция принимает два входа, а и б, и возвращает их общее количество. => знак определяет это как функцию стрелки.

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

функциядобавлять(а, б) {
возвращаться а + б;
}

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

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

2. Различия в области охвата

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

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

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

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

константа человек = {
 имя: 'Джон,'
 сказатьИмя: функция() {
консоль.бревно(этот.имя);
 }
};
человек.назовитеИмя(); // регистрирует 'Джон'

Здесь обычная функция sayName() является методом объекта person и этот ключевое слово внутри этой функции относится к этому объекту человека.

Давайте теперь попробуем то же самое со стрелочной функцией:

константа человек = {
 имя: 'Джон',
 сказатьИмя: () => {
консоль.бревно(этот.имя);
 }
};
человек.назовитеИмя(); // регистрирует неопределенное значение

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

В результате, когда вы звоните человек.говоритеИмя(), Вы получаете неопределенный скорее, чем "Джон." Это может существенно повлиять на то, как вы пишете и используете функции в своем коде.

3. Варианты использования и лучшие практики

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

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

4. Различия привязки функций

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

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

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

Давайте посмотрим на пример, чтобы лучше понять эту разницу. Предположим, у вас есть человек объект с имя поле и метод, называемый сказатьИмя() который использует обычную функцию для записи имени человека:

константа человек = {
 имя: 'Джон',
 сказатьИмя: функция() {
консоль.бревно(этот.имя);
 }
};
константа другое лицо = {
 имя: 'Джейн'
};
person.sayName.call (другой человек); // записывает 'Джейн'

В этом примере вы вызываете объект человека сказатьИмя() метод со значением другой человек используя вызов() метод. Из-за этого сказатьИмя() метод, этот, ключевое слово привязано к другой человек объект, и он регистрирует "Джейн" скорее, чем "Джон."

Давайте теперь используем то же самое со стрелочной функцией:

константа человек = {
 имя: 'Джон',
 сказатьИмя: () => {
консоль.бревно(этот.имя);
 }
};
константа другое лицо = {
 имя: 'Джейн'
};
person.sayName.call (другой человек); // регистрирует неопределенное значение

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

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

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

5. Неявный возврат

Стрелочная функция имеет неявную функцию возврата. Если тело функции состоит из одного единственного выражения, функции возвращают это выражение.

В качестве примера:

константа двойной = (Икс) => Икс * 2;

Эта стрелочная функция возвращает значение типа double из параметра. Вам не нужно использовать явное возвращаться ключевое слово, потому что тело функции имеет только одно выражение.

6. Различия совместимости

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

Вот иллюстрация стрелочной функции, которая может не работать в более установленных условиях:

константа добавить = (а, б) => а + б;

Ниже приведена аналогичная обычная функция, которая должна работать в большинстве ситуаций:

функциядобавлять(а, б) {
возвращаться а + б;
}

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

Выбор между стрелочными функциями и обычными функциями в JavaScript

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

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

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