6 Rozdiely medzi šípkovými funkciami a bežnými funkciami v JavaScripte

Funkcie sú nevyhnutnou súčasťou JavaScriptu, ktoré potrebujete použiť na písanie opätovne použiteľného kódu. Dva hlavné typy funkcií sú regulárne a šípkové funkcie a existuje mnoho spôsobov, ako ich definovať.

Aj keď spĺňajú podobné potreby, majú niekoľko zásadných rozdielov, ktoré môžu zásadne ovplyvniť spôsob, akým ich používate vo svojom kóde. Zistite všetko o niekoľkých rozdieloch medzi funkciami šípok a bežnými funkciami.

1. Syntaktické rozdiely

Syntax, ktorú si vyberiete pri vývoji funkcií JavaScript, má veľký vplyv na to, aké jednoduché je čítanie a pochopenie kódu. Syntax regulárnych funkcií a funkcií šípok sa výrazne líši, čo ovplyvňuje spôsob, akým ich píšete a používate.

Funkcie šípok JavaScriptu používať menšiu jazykovú štruktúru, ktorá je zrozumiteľnejšia. Môžete ich použiť na vytváranie funkcií ich spojením do jedného výrazu alebo príkazu.

konšt pridať = (a, b) => a + b;

V tomto príklade

pridať funkcia akceptuje dva vstupy, a a ba vráti ich celkovú sumu. The => znak to definuje ako funkciu šípky.

Na druhej strane, definovanie regulárnej funkcie vyžaduje použitie funkciu kľúčové slovo s podrobnejšou syntaxou, ako je znázornené v tomto príklade:

funkciupridať(a, b) {
vrátiť a + b;
}

V tomto príklade funkciu kľúčové slovo definuje bežnú funkciu, ktorá tiež používa zložené zátvorky a vrátiť vyhlásenie.

Regulárne funkcie sú užitočnejšie pre komplexnú syntax vyžadujúcu viacero príkazov alebo výrazov. Naproti tomu funkcie šípok používajú stručnejšiu syntax, ktorá môže uľahčiť čítanie a pochopenie vášho kódu.

2. Rozsahové rozdiely

Pojem "rozsah" popisuje, ako sú prístupné vnútorné premenné a funkcie funkcie. V JavaScripte definujete a pristupujete k premenným a funkciám v celom kóde pomocou rozsahu. Ich odlišné rozsah môže výrazne ovplyvniť spôsob, akým píšete a používate JavaScript šípka a bežné funkcie.

V rozsahu, ako funkcie šípok zvládajú toto kľúčové slovo sa výrazne líši od toho, ako fungujú bežné funkcie. Regulárne funkcie definujú toto samotné kľúčové slová; preto sa môže meniť v závislosti od kontextu, v ktorom funkciu vyvoláte.

Na druhej strane, pretože nešpecifikujú toto kľúčové slovo, funkcie šípok používajú to isté toto ako statický rozsah, ktorý ich obklopuje.

Ak chcete vidieť rozdiel, pozrite si nasledujúci príklad. Povedzme, že máte a osoba objekt s a názov vlastnosť a metóda tzv sayName() ktorý zaznamená meno osoby pomocou bežnej funkcie:

konšt osoba = {
 názov: "John,"
 sayName: funkciu() {
konzoly.log(toto.názov);
 }
};
osoba.sayName(); // logs 'John'

Bežná funkcia sayName() je tu metódou objektu person a toto kľúčové slovo v tejto funkcii odkazuje na daný objekt osoby.

Skúsme teraz to isté s funkciou šípky:

konšt osoba = {
 názov: 'John',
 sayName: () => {
konzoly.log(toto.názov);
 }
};
osoba.sayName(); // protokoly nie sú definované

Pretože funkcia šípky použitá v sayName() metóda nedefinuje svoju vlastnú toto kľúčové slovo, používa toto statického rozsahu, ktorý ho obklopuje. V tomto prípade ide o globálny rozsah inštancie.

V dôsledku toho, keď zavoláte person.sayName(), dostanete nedefinované radšej než "John." To môže výrazne ovplyvniť spôsob, akým píšete a používate funkcie vo svojom kóde.

3. Prípady použitia a osvedčené postupy

Bežné funkcie sú vhodnejšie pre funkcie, ktoré si vyžadujú svoje vlastné toto kľúčové slovo, ako napríklad metódy v objekte.

Funkcie šípok sú vhodnejšie funkčné programovanie a spätné volania, ktoré nevyžadujú toto kľúčové slovo.

4. Funkčné väzbové rozdiely

Funkčná väzba je termín používaný na opis vzťahu medzi toto kľúčové slovo a funkcie vo vašom kóde. Variácie vo väzbe funkcií medzi funkciami šípok a normálnymi funkciami môžu výrazne ovplyvniť spôsob, akým vytvárate a používate funkcie šípok.

Pomocou toto Kľúčové slovo ho robí jedinečným v bežných funkciách a spája sa s rôznymi objektmi na základe metódy použitej na volanie funkcie. Väzba funkcií je jedným z najdôležitejších rozdielov medzi bežnými funkciami a funkciami šípok.

Naproti tomu šípkové funkcie nemajú toto kľúčové slovo; skôr to získavajú z okolitých rozsahov.

Pozrime sa na príklad, aby sme pochopili tento rozdiel viac. Predpokladajme, že máte a osoba objekt s a názov pole a metóda tzv sayName() ktorý používa bežnú funkciu na zaznamenanie mena osoby:

konšt osoba = {
 názov: 'John',
 sayName: funkciu() {
konzoly.log(toto.názov);
 }
};
konšt otherPerson = {
 názov: 'Jane'
};
person.sayMeno.call (otherPerson); // logs 'Jane'

V tomto príklade voláte objekt osoby sayName() metóda s hodnotou iná osoba pomocou hovor() metóda. Z tohto dôvodu, sayName() metóda, toto, kľúčové slovo je viazané na iná osoba objekt a zaznamená sa "Jane" radšej než "John."

Teraz použijeme to isté s funkciou šípky:

konšt osoba = {
 názov: 'John',
 sayName: () => {
konzoly.log(toto.názov);
 }
};
konšt otherPerson = {
 názov: 'Jane'
};
person.sayMeno.call (otherPerson); // protokoly nie sú definované

Keďže sayName() technika nemá svoje vlastné kľúčové slovo, v tomto príklade v ňom používate funkciu šípky. V tomto prípade funkcia šípky zdedí vlastnosti okolitého rozsahu, ktorým je globálny rozsah.

To znamená, že keď bežíte person.sayName.call (otherPerson), funkcia šípky toto kľúčové slovo zostáva globálnym objektom a nedefinované nastupuje na miesto Jane v denníku.

Ak potrebujete naviazať funkciu na konkrétnu toto hodnotu, môže byť výhodnejšia bežná funkcia. Ak však nepotrebujete viazať funkciu na konkrétnu toto hodnota, funkcia šípky môže byť kratšia a zrozumiteľnejšia.

5. Implicitná návratnosť

Funkcia šípky má implicitnú funkciu návratu. Ak telo funkcie pozostáva z jedného jediného výrazu, funkcie vrátia tento výraz.

Ako príklad:

konšt dvojitý = (X) => X * 2;

Táto funkcia šípky vracia hodnotu double z parametra. Nie je potrebné použiť explicitné vrátiť kľúčové slovo, pretože telo funkcie má iba jeden výraz.

6. Rozdiely v kompatibilite

Rozdiely v kompatibilite sa týkajú pridaných funkcií šípok ECMAScript 6, ktoré nemusia fungovať so staršími prehliadačmi alebo prostrediami. Na druhej strane, bežné funkcie existujú už od začiatku JavaScriptu a sú široko podporované.

Tu je ilustrácia funkcie šípky, ktorá nemusí fungovať v ustálenejších podmienkach:

konšt pridať = (a, b) => a + b;

Nasleduje porovnateľná bežná funkcia, ktorá by mala fungovať vo väčšine situácií:

funkciupridať(a, b) {
vrátiť a + b;
}

Pri zacielení na staršie prostredia používajte radšej bežné funkcie ako funkcie šípok, aby ste zaistili kompatibilitu. Funkcie šípok však môžu poskytnúť syntax, ktorá je pri práci s modernými prehliadačmi a prostrediami ľahšie pochopiteľná a zhustená.

Výber medzi šípkovými funkciami a bežnými funkciami v JavaScripte

V JavaScripte majú šípky a bežné funkcie odlišné vlastnosti a aplikácie. Funkcie šípok majú jednoduchú syntax, dedenie toto kľúčové slovo z kontextu ich použitia, zatiaľ čo bežné funkcie sú prispôsobiteľnejšie a dokážu si poradiť aj so zložitejšími situáciami.

Je dôležité vedieť, ako sa líšia a ako ich používať podľa požiadaviek vášho kódu. Pri výbere druhu funkcie by ste mali zvážiť aj rozdiely v kompatibilite.

V konečnom dôsledku sú šípka a bežné funkcie JavaScriptu výkonnými nástrojmi, ktoré vám pomôžu písať čistejší a efektívnejší kód.