A nyíl függvények az egyik fontos újítása a JavaScript ES6-ban bevezetett új nyelvi elemeinek. Minden hagyományos függvény átírható nyíl függvényes megfelelőre.
Egyszerű példa
Induljunk ki egy nagyon egyszerű példából. Van egy függvényünk, ami a konzolba ír egy szöveget:
function hello(msg) {
console.log(msg);
} A függvénynek átadunk egy szöveget vagy számot és azt bedobja a konzolba:
hello("Szevasztok!");A böngésző konzoljában az a szöveg fog megjelenni, hogy Szevasztok!
Hogy néz ki ez nyíl függvényes formában?
const hello = (msg) => {
console.log(msg);
} A hívás így történik:
hello("Szia!");Nincs túl sok különbség. Maximum annyi vehető észre, hogy elhagytuk a function kulcsszót, helyette a const-tal létrehoztuk a hello változót. Tehát az egész olyan, mintha a függvényt egy változóba tettük volna. Végül is ezt tettük.
Másik különbség, hogy a függvény paramétere és a kezdő kapcsos zárójel között ott van az a „nyíl”, vagyis a => karakter pár.
Egyszerűbb forma
Van három olyan eset, amikor sokkal egyszerűbben is definiálhatunk egy nyíl függvényt.
- Ha csak egy paraméter van, akkor a paraméter köré nem kell kitenni a gömbölyű zárójelet:
const hello = msg => {
console.log(msg);
}- Ha a függvény törzsében csak egy utasítást hajtunk végre, akkor kapcsos zárójel sem kell:
const hello = msg => console.log(msg);- Ha nincs paraméter, akkor viszont meg kell adni egy üres gömbölyű zárójel párt:
const hello = () => console.log("Hello World!");A this használata
Amikor egy hagyományos függvényt írunk és valahol használjuk benne a this kulcsszót, akkor a this mindig azt az objektumot jelenti, ami a függvényt meghívta. Ez lehet például a window, a document, a button, vagy bármelyik másik obejktum. Egy a fontos: mindig azt az objektumot jelöli, ami a függvényt meghívta.
Nyíl függvény esetében pedig a this azt az objektumot jelenti, amin belül a nyíl függvény definiálva lett.
Nézzük a példákat, hogy teljesen vili legyen!
this és a hagyományos függvény – példa
Ez egy hagyományos függvény, ami a this-t használja:
function thisOne() {
console.log("Who is 'this'?: " + this);
}Tegyük fel, hogy ezt a függvényt egyszer meghívja a window objektum akkor, amikor az oldal betöltődik:
window.addEventListener("load", thisOne);Valamint egy gomb, amikor arra kattintunk:
document.getElementById("btn").addEventListener("click", thisOne);Az első esetben a this az maga a window, mert ő volt aki meghívta a thisOne nevű függvényt:
Who is 'this'?: [object Window]Szöveg lesz a konzolban.
A második esetben pedig a this az a gomb, mert ő volt az „elkövető”, vagyis aki a függvény hívást kezdeményezte, tehát ez fog megjelenni a konzolban:
Who is 'this'?: [object HTMLButtonElement]this és a nyíl függvény – példa
A nyílfüggvény így néz ki:
const thisTwo = () => console.log(`Who is "this"?: ${this}`);A függvény hívásai így történnek:
window.addEventListener("load", thisTwo);
document.getElementById("btn2").addEventListener("click", thisTwo);Mindkét esetben ezt látjuk a konzolban:
Who is "this"?: [object Object]Ezekben az esetekben az ős Object objektum volt a this, mert valójában ez definálja a függvényt. A lényeg tehát, hogy nem a hívó a this ebben az esetben.
Remélem sikerült ezzel érzékeltetnem a this különbözőképpen történő kezelését.
Működő példa
Itt található egy példa, amin keresztül bemutatom a nyíl függvény hosszabb és rövidebb formáját, valamint a this használatát is.