Hvorfor du skal være forsigtig med at bruge pilefunktioner i JavaScript

Pilfunktionssyntaksen ankom med udgivelsen af ​​ECMAScript 2015, også kendt som ES6. I dag er pilefunktioner blevet favoritfunktionen hos mange JavaScript-programmører. Denne kærlighed til pilefunktioner skyldes den kortfattede syntaks og ligefremme opførsel af "dette" nøgleordet.

Men pilefunktioner har nogle ulemper. Lær om de vigtigste forskelle mellem pilefunktioner og almindelige funktioner, og find ud af, hvorfor du i de fleste tilfælde er bedre til at holde fast i almindelige funktioner.

1. Du skal definere en pilefunktion, før du bruger den

Du kan ikke hejse en pilefunktion. JavaScripts standard hejseregler giver dig mulighed for at kalde en funktion, før du definerer den, men det er ikke tilfældet med pilefunktioner. Hvis du har en JavaScript-fil med funktioner, vil det betyde, at al den vigtige kode vil være nede i bunden af ​​filen.

Overvej for eksempel følgende JavaScript-kode:

konst doubleNumbers = (tal) { 
 tal.kort(n => n * 2)
}
konst halveNumbers = (tal) { 
 tal.kort(n => n / 2)
}
konst sumNumbers = (tal) { 
 tal.reducere((sum, n) => { 
Vend tilbage sum + n; 
 }, 0)
}
konst tal = [1, 20, 300, 700, 1500]
konst fordoblet = dobbeltNumber (tal)
konsol.log (halveNumbers (fordoblet))
konsol.log (sumNumbers (numbers))

I ovenstående kodeblok er den vigtige kode nede i bunden. Hjælpefunktionerne er alle defineret før udførelsespunktet. At skulle oprette dine JavaScript-funktioner øverst i filen kan være ubelejligt, fordi du bliver nødt til at rulle ned for at se den faktiske kode, der gør arbejdet.

Hvis du flyttede hjælpefunktionerne til bunden og den faktiske kode til toppen, får du en referencefejl. Kørselstiden behandler funktionen som en variabel. Derfor skal du først definere det, før du får adgang til eller påberåber det. Men hvis du konverterede alle pilefunktioner til almindelige funktioner (med fungere søgeord), så ville din kode fungere fint. Samtidig forbliver den vigtige kode øverst, hvor du kan finde den.

Dette er et af de største problemer med at bruge pilefunktioner. De udviser ingen hostingadfærd. Med andre ord skal du definere dem før det faktiske sted, du vil bruge dem. Til gengæld kan du hejse almindelige funktioner.

2. Pilefunktioner kan være forvirrende for nogle mennesker

En anden grund til at bruge almindelige funktioner i stedet for pilefunktioner er læsbarhed. Almindelige funktioner er nemmere at læse, fordi de eksplicit bruger fungere søgeord. Dette nøgleord identificerer, at den pågældende kode er en funktion.

På den anden side tildeler du pilefunktioner til variable. Som nybegynder kan dette forvirre dig til at tro, at koden er en variabel snarere end en funktion.

Sammenlign de to funktioner nedenfor:

konst halveNumbers = (tal) => {
Vend tilbage tal.kort(n => n / 2)
}
fungerehalve numre(tal) { 
Vend tilbage tal.kort(n => n / 2)
}

Ved første øjekast kan du nemt se, at den anden del af kode er en funktion. Syntaksen gør det klart, at koden er en funktion. Den første er dog tvetydig - det er måske ikke nemt at se, om det er en variabel eller en funktion.

3. Du kan ikke bruge pilefunktioner som metoder

Når du bruger en pilefunktion, vil det her søgeord svarer til det, der er uden for den ting, vi er indeni. I de fleste tilfælde er det vinduesobjektet.

Overvej følgende objekt:

konst person = {
 fornavn: "Kyle",
 efternavn: "Laver mad",
 Print navn: () => {
konsol.log(`${det her.fornavn}``${det her.efternavn}` )
 }
}
person.printName()

Hvis du kører koden, vil du bemærke, at browseren udskriver udefineret for både fornavn og efternavn. Da vi bruger en pilefunktion, det her nøgleordet svarer til vinduesobjektet. Desuden er der ingen fornavn eller efternavn egenskab defineret der.

For at løse dette problem skal du bruge en almindelig funktion i stedet:

konst person = {
 fornavn: "Kyle",
 efternavn: "Laver mad",
 Print navn: fungere() {
konsol.log(`${det her.fornavn}``${det her.efternavn}` )
 }
}
person.printName()

Det kommer til at fungere fint pga det her henviser til person objekt. Hvis du kommer til at lave denne form for objektorienteret programmering meget, så skal du sørge for, at du bruger almindelige funktioner. Pilefunktioner virker ikke.

Hvornår skal pilefunktionerne bruges

Brug pilefunktioner hovedsageligt på steder, hvor du har brug for en anonym funktion. Et eksempel på et sådant scenario er at beskæftige sig med en tilbagekaldsfunktion. Det er bedre at bruge en pilefunktion, når du skriver et tilbagekald, fordi syntaksen er så meget enklere end at skrive en fuld funktion.

Sammenlign disse to og afgør, hvad der er mere ligetil:

fungerehalve numre(tal) {
Vend tilbage tal.kort(n => n / 2)
}
fungerehalve numre(tal) {
Vend tilbage tal.kort(fungere(n) {
Vend tilbage n / 2
 })
}

Begge tilfælde sender en tilbagekaldsfunktion til map()-metoden. Men det første tilbagekald er en pilefunktion, mens det andet er en fuld funktion. Du kan se, hvordan den første funktion optager færre linjer kode end den anden funktion: tre vs. fem.

Den anden tid til at bruge pilefunktioner er, når du vil beskæftige dig med en bestemt "denne" syntaks. Objektet "dette" vil ændre sig afhængigt af, om du bruger almindelige funktioner eller pilefunktioner til bestemte ting.

Den følgende kodeblok registrerer to "klik"-hændelseslyttere på dokumentobjektet. Den første instans bruger en almindelig funktion som tilbagekald, mens den anden bruger en pilefunktion. Inde i begge tilbagekald logger koden udførelsesobjektet (dette) og begivenhedsmålet:

dokument.addEventListener("klik", fungere(e) {
konsol.log("FUNGERE", det her, e.target)
})
dokument.addEventListener("klik", (e) => {
konsol.log("PIL", det her, e.target)
})

Hvis du skulle køre dette script, vil du bemærke, at "denne" reference er forskellig for begge. For den almindelige funktion refererer denne egenskab til dokumentet, som er det samme som e.target ejendom. Men for pilefunktionen refererer dette til vinduesobjektet.

Når du bruger en almindelig funktion som tilbagekald, vil dette referere til det element, hvor vi udløser hændelsen. Men når du bruger en pilefunktion, er dette nøgleord som standard vinduesobjektet.

Lær mere om pilefunktioner vs almindelige funktioner

Der er flere andre subtile forskelle mellem almindelige funktioner og pilefunktioner. At mestre begge typer funktioner er grundlæggende for at opnå beherskelse af JavaScript. Lær, hvornår du skal bruge den ene, og hvornår du skal bruge den anden; så forstår du implikationerne af at bruge enten en almindelig funktion eller en pilefunktion i din JavaScript.