Miért kell óvatosnak lennie a JavaScript nyílfüggvényeinek használatával?

A nyíl függvény szintaxisa az ECMAScript 2015, más néven ES6 kiadásával érkezett meg. Manapság a nyílfüggvények sok JavaScript programozó kedvenc funkciójává váltak. A nyílfüggvények iránti szeretet a "this" kulcsszó tömör szintaxisának és egyértelmű viselkedésének köszönhető.

De a nyíl függvényeknek van néhány hátránya. Ismerje meg a nyílfüggvények és a normál függvények közötti fő különbségeket, és derítse ki, hogy a legtöbb esetben miért jobb, ha ragaszkodik a normál funkciókhoz.

1. Használat előtt meg kell határoznia egy nyíl funkciót

Nyíl funkciót nem lehet felemelni. A JavaScript alapértelmezett emelési szabályai lehetővé teszi egy függvény meghívását a definiálás előtt, de ez nem így van a nyílfüggvényeknél. Ha van egy JavaScript-fájlja függvényekkel, ez azt jelenti, hogy az összes fontos kód a fájl alján lesz.

Vegyük például a következő JavaScript kódot:

const doubleNumbers = (számok) { 
 numbers.map(n => n * 2)
}
const halfNumbers = (számok) { 
 numbers.map(n => n / 2)
}
const sumNumbers = (számok) { 
 numbers.reduce((összeg, n) => { 
Visszatérés összeg + n; 
 }, 0)
}
const számok = [1, 20, 300, 700, 1500]
const megduplázva = doubleNumbers (számok)
konzol.log (halveNumbers (duplázva))
konzol.log (sumNumbers (számok))

A fenti kódblokkban a fontos kód alul van. A segítő függvények mind a végrehajtási pont előtt vannak meghatározva. Kell tenni vmit létrehozza a JavaScript függvényeket a fájl tetején lévő hely kényelmetlen lehet, mert le kell görgetnie, hogy megtekinthesse a ténylegesen működő kódot.

Ha a segédfunkciókat alulra, a tényleges kódot pedig felülre helyezte, hivatkozási hibát kap. A futási környezet a függvényt változóként kezeli. Ezért először meg kell határoznia, mielőtt hozzáférne vagy meghívná. De ha az összes nyílfüggvényt normál függvényekké alakította át (a funkció kulcsszó), akkor a kód jól működne. Ugyanakkor a fontos kód a tetején marad, ahol megtalálhatja.

Ez az egyik legnagyobb probléma a nyíl függvények használatával. Nem mutatnak semmilyen vendéglátó magatartást. Más szóval, meg kell határoznia őket a tényleges használat előtt. Másrészt normál funkciókat emelhet.

2. A nyílfunkciók zavaróak lehetnek egyesek számára

A másik ok arra, hogy a nyílfüggvények helyett normál függvényeket használjunk, az olvashatóság. A normál függvények könnyebben olvashatók, mert kifejezetten használják a funkció kulcsszó. Ez a kulcsszó azt jelzi, hogy a kérdéses kód egy függvény.

Másrészt nyílfüggvényeket rendel a változókhoz. Kezdőként ez megzavarhatja Önt, és azt gondolhatja, hogy a kód inkább változó, mint függvény.

Hasonlítsa össze az alábbi két funkciót:

const halfNumbers = (számok) => {
Visszatérés numbers.map(n => n / 2)
}
funkcióhalfNumbers(számok) { 
Visszatérés numbers.map(n => n / 2)
}

Első pillantásra könnyen megállapíthatja, hogy a kód második része egy függvény. A szintaxis egyértelművé teszi, hogy a kód függvény. Az első azonban kétértelmű – lehet, hogy nem könnyű megállapítani, hogy ez egy változó vagy egy függvény.

3. A nyílfüggvényeket nem használhatja módszerként

Ha nyílfüggvényt használ, a ez kulcsszó annak felel meg, ami kívül esik azon a dolgon, amiben vagyunk. A legtöbb esetben ez az ablak objektum.

Tekintsük a következő objektumot:

const személy = {
 keresztnév: "Kyle",
 vezetéknév: "Szakács",
 nyomtatott név: () => {
konzol.log(`${ez.keresztnév}``${ez.vezetéknév}` )
 }
}
person.printName()

Ha futtatja a kódot, észre fogja venni, hogy a böngésző nyomtat határozatlan kereszt- és vezetéknévre egyaránt. Mivel nyílfüggvényt használunk, ez kulcsszó az ablak objektumnak felel meg. Ezenkívül nincs keresztnév vagy vezetéknév ott meghatározott tulajdonság.

A probléma megoldásához egy szokásos függvényt kell használnia:

const személy = {
 keresztnév: "Kyle",
 vezetéknév: "Szakács",
 nyomtatott név: funkció() {
konzol.log(`${ez.keresztnév}``${ez.vezetéknév}` )
 }
}
person.printName()

Ez jól fog működni, mert ez utal a személy tárgy. Ha sok ilyen objektum-orientált programozást fog végezni, akkor meg kell győződnie arról, hogy normál függvényeket használ. A nyíl funkciók nem működnek.

Mikor kell használni a nyílfüggvényeket

Főleg olyan helyeken használja a nyíl függvényeket, ahol anonim funkcióra van szüksége. Ilyen forgatókönyv például a visszahívási függvény kezelése. A visszahívás írásakor jobb egy nyíl függvényt használni, mert a szintaxis sokkal egyszerűbb, mint egy teljes függvény írása.

Hasonlítsa össze ezt a kettőt, és döntse el, melyik az egyszerűbb:

funkcióhalfNumbers(számok) {
Visszatérés numbers.map(n => n / 2)
}
funkcióhalfNumbers(számok) {
Visszatérés numbers.map(funkció(n) {
Visszatérés n / 2
 })
}

Mindkét eset átad egy visszahívási függvényt a map() metódusnak. De az első visszahívás egy nyíl funkció, míg a második egy teljes funkció. Láthatja, hogy az első függvény kevesebb kódsort foglal el, mint a második függvény: három vs. öt.

A másik alkalom a nyílfüggvények használatára az, amikor egy adott "ezzel" szintaxissal kíván foglalkozni. A "this" objektum attól függően változik, hogy normál függvényeket vagy nyílfüggvényeket használ-e bizonyos dolgokhoz.

A következő kódblokk két „kattintásos” eseményfigyelőt regisztrál a dokumentum objektumon. Az első példány normál függvényt használ visszahívásként, míg a második egy nyíl függvényt. Mindkét visszahíváson belül a kód naplózza a végrehajtási objektumot (ezt) és az eseménycélt:

dokumentum.addEventListener("kattintás", funkció(e) {
konzol.log("FUNKCIÓ", ez, e.target)
})
dokumentum.addEventListener("kattintás", (e) => {
konzol.log("NYÍL", ez, e.target)
})

Ha ezt a szkriptet futtatná, észreveheti, hogy az „ez” hivatkozás mindkettőnél eltérő. A normál függvény esetében ez a tulajdonság a dokumentumra hivatkozik, amely megegyezik a e.cél ingatlan. De a nyíl függvény esetében ez az ablak objektumra hivatkozik.

Ha normál függvényt használ visszahívásként, akkor ez arra az elemre vonatkozik, ahol az eseményt kiváltjuk. De ha nyílfüggvényt használ, akkor ez a kulcsszó alapértelmezés szerint az ablak objektum.

Tudjon meg többet a nyílfüggvények és a reguláris függvények funkcióiról

Számos más finom különbség is van a normál függvények és a nyíl függvények között. Mindkét funkciótípus elsajátítása alapja a JavaScript elsajátításának. Tanulja meg, mikor kell használni az egyiket és mikor a másikat; akkor megértheti, milyen következményekkel jár egy normál függvény vagy egy nyíl függvény használata a JavaScriptben.