JavaScript nuolifunktiot

Nuolifunktiot otettiin käyttöön ES6:ssa.

Nuolifunktiot mahdollistavat lyhyempien funktion kirjoittamisen:

Syntaksi

let myFunction = (a, b) => a * b;

Kokeile itse

Ennen:

hello = function() {
  return "Hello World!";
}

Kokeile itse

Nuolifunktioiden jälkeen:

hello = () => {
  return "Hello World!";
}

Kokeile itse

todella lyhennetty! Jos funktion ainoa lause palauttaa arvon, voit poistaa sulkeet ja return Avainsana:

Nuolifunktioiden oletusarvoinen palautusarvo:

hello = () => "Hello World!";

Kokeile itse

Huomautus:Tämä pätee vain silloin, kun funktion ainoa lause on yksi.

Jos sinulla on parametreja, siirrä ne sulkeisiin:

Parametria sisältävät nuolifunktiot:

hello = (val) => "Hello " + val;

Kokeile itse

Itse asiassa, jos parametreja on vain yksi, voit myös jättää sulkeet pois:

Nuolifunktiot ilman sulkeita:

hello = val => "Hello " + val;

Kokeile itse

tämä mitä tehdä?

Nuolifunktiot suhteessa perusfunktion tämä käsittely on erilainen.

Yksinkertaisesti sanottuna nuolifunktioiden käytössä ei ole tämä sidottu.

Perusfunktion tapauksessa avainsana tämä kutsuvan objekti voi olla ikkuna, dokumentti, painike tai mikä tahansa muu.

Nuolifunktioiden tapauksessatämä Avainsana aina viittaa nuolifunktion määrittävään objektiin.

Tarkastellaan kahta esimerkkiä ymmärtääksemme eroja.

Nämä kaksi esimerkkiä kutsuvat menetelmää kahdesti, ensimmäisen kerran sivun latauksen yhteydessä ja toisen kerran kun käyttäjä napsauttaa painiketta.

Ensimmäisessä esimerkissä käytetään perusfunktion, toisessa nuolifunktion.

Tuloksena on ensimmäisessä esimerkissä kaksi eri objektia (window ja button), toisessa esimerkissä kaksi kertaa window-objektia, koska window-objekti on funktion "omistaja".

esimerkki

Perusfunktion tapauksessa this viittaa kutsuvan objektiin:

// Perusfunktiot:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Window-objekti kutsuu tätä funktiota:
window.addEventListener("load", hello);
// Paine buton-objekti kutsuu tätä funktiota:
document.getElementById("btn").addEventListener("click", hello);

Kokeile itse

esimerkki

käytti nuolifunktiota, niin tämä Määrittää funktion omistaja:

// Nuolifunktio:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Window-objekti kutsuu tätä funktiota:
window.addEventListener("load", hello);
// Paine buton-objekti kutsuu tätä funktiota:
document.getElementById("btn").addEventListener("click", hello);

Kokeile itse

Muista nämä erot kun käytät funktioita. Jos tavallinen funktio on juuri sitä, mitä tarvitset, käytä se, mutta jos ei, käytä nuolifunktiota.

Selaimen tuki

Seuraavassa taulukossa on lueteltu ensimmäiset selaimet, jotka täysin tukevat JavaScript-kivutunnisteita:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Syyskuu 2015 Heinäkuu 2015 Toukokuu 2013 Syyskuu 2016 Syyskuu 2015