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

Функциите са съществена част от JavaScript, която трябва да използвате, за да пишете код за многократна употреба. Двата основни типа функции са обикновени и стрелкови функции и има много начини да ги дефинирате.

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

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

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

Функции със стрелки на JavaScript използвайте по-малка езикова структура, която е по-разбираема. Можете да ги използвате за създаване на функции, като ги комбинирате в един израз или инструкция.

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

В този пример, добавете функцията приема два входа, а и bи връща общата им сума. The => знакът определя това като функция със стрелка.

От друга страна, дефинирането на регулярна функция изисква използването на функция ключова дума, с по-подробен синтаксис, както е показано в този пример:

функциядобавете(а, б) {
връщане a + b;
}

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

Редовните функции са по-полезни за сложен синтаксис, изискващ множество оператори или изрази. За разлика от това, функциите със стрелки използват по-сбит синтаксис, който може да направи вашия код по-лесен за четене и разбиране.

2. Разлики в обхвата

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

В обхвата, как функциите със стрелки обработват това ключова дума се различава значително от начина, по който нормалните функции го правят. Редовните функции определят това самите ключови думи; следователно може да се промени в зависимост от контекста, в който извиквате функцията.

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

За да видите разликата, вижте следния пример. Да приемем, че имате човек обект с а име свойство и метод, наречен sayName() който регистрира името на човека с помощта на обикновена функция:

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

Тук обикновената функция sayName() е метод на обекта person и на това ключова дума вътре в тази функция се отнася до този обект на човек.

Нека сега опитаме същото нещо с функция със стрелка:

конст човек = {
 име: 'Джон',
 кажиИме: () => {
конзола.log(това.име);
 }
};
person.sayName(); // регистрира недефинирано

Тъй като функцията стрелка, използвана в sayName() методът не определя собствения си това ключова дума, тя използва това на статичния обхват, който го заобикаля. В този случай това е глобалният обхват на екземпляра.

В резултат на това, когато се обадите person.sayName(), Вие получавате недефиниран отколкото "Джон." Това може значително да повлияе на това как пишете и използвате функции във вашия код.

3. Случаи на употреба и най-добри практики

Редовните функции са по-подходящи за функции, които изискват собствени това ключова дума, като например методи в обект.

Функциите със стрелки са по-подходящи за функционално програмиране и обратни повиквания, които не изискват това ключова дума.

4. Разлики в обвързването на функциите

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

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

За разлика от тях функциите на стрелките нямат това ключова дума; по-скоро го получават от околните обхвати.

Нека да разгледаме пример, за да разберем повече за тази разлика. Да предположим, че имате a човек обект с а име поле и метод, наречен sayName() който използва обикновена функция за запис на името на лицето:

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

В този пример вие наричате човека обект sayName() метод със стойността друг човек използвайки обадете се() метод. Поради това, на sayName() метод, това, ключовата дума е обвързана с друг човек обект и той регистрира "Джейн" отколкото "Джон."

Нека сега използваме същото нещо с функция със стрелка:

конст човек = {
 име: 'Джон',
 кажиИме: () => {
конзола.log(това.име);
 }
};
конст anotherPerson = {
 име: "Джейн"
};
person.sayName.call (друг човек); // регистрира недефинирано

Тъй като sayName() техниката няма своя собствена ключова дума, в този пример използвате функция със стрелка в нея. В този случай функцията стрелка наследява свойствата на заобикалящия обхват, който е глобалният обхват.

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

Ако трябва да свържете функция към конкретна това стойност, обикновена функция може да е за предпочитане. Ако обаче не е необходимо да обвързвате функция към конкретна това стойност, функция със стрелка може да е по-кратка и по-лесна за разбиране.

5. Неявно връщане

Функцията стрелка има функция за имплицитно връщане. Ако тялото на функцията се състои от един израз, функциите връщат този израз.

Като пример:

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

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

6. Разлики в съвместимостта

Разликите в съвместимостта се отнасят до добавените в ECMAScript 6 функции със стрелки, които може да не работят с по-стари браузъри или среди. От друга страна, обикновените функции съществуват от началото на JavaScript и се поддържат широко.

Ето илюстрация на функция със стрелка, която може да не работи при по-утвърдени условия:

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

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

функциядобавете(а, б) {
връщане a + b;
}

Използвайте обикновени функции вместо функции със стрелки, когато насочвате към по-стари среди, за да осигурите съвместимост. Функциите със стрелки обаче могат да предоставят синтаксис, който е по-лесен за разбиране и по-кондензиран при работа с модерни браузъри и среди.

Избор между функции със стрелки и обикновени функции в JavaScript

В JavaScript функциите със стрелки и обикновените функции имат различни характеристики и приложения. Функциите със стрелки имат прост синтаксис, наследяващ това ключова дума от контекста на тяхното използване, докато обикновените функции са по-адаптивни и могат да се справят с по-сложни ситуации.

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

В крайна сметка, стрелката на JavaScript и обикновените функции са мощни инструменти, които ви помагат да пишете по-чист и по-ефективен код.