JavaScript-pyltjie-funksie
Pyltjie-funksies is in ES6 bekendgestel.
Pyltjiefunksies laat ons toe om korter funksiesintaksis te skryf:
let myFunction = (a, b) => a * b;
Voor:
hello = function() {
return "Hello World!";
}
Met pylfunksie:
hello = () => {
return "Hello World!";
}
Dit word korter! As die funksie net een stelling het, en die stelling gee 'n waarde terug, kan jy die hakies en die
returnsleutelwoord verwyder:
Pyltjiefunksies Retourwaarde by verstek:
hello = () => "Hello World!";
Let wel: Dit werk slegs as die funksie net een stelling het.
As jy parameters het, gee jy dit binne die hakies deur:
Pyltjiefunksie met parameters:
hello = (val) => "Hello " + val;
Trouens, as jy net een parameter het, kan jy die hakies ook oorslaan:
Waarvan this?
Die hantering van thisis ook anders in pylfunksies in vergelyking met gewone funksies.
Kortom, met pylfunksies is daar geen binding van
this.
In gewone funksies het die thissleutelwoord die voorwerp verteenwoordig wat die funksie genoem het, wat die venster, die dokument, 'n knoppie of wat ook al kan wees.
Met pylfunksies verteenwoordig die thissleutelwoord altyd die voorwerp wat die pylfunksie gedefinieer het.
Kom ons kyk na twee voorbeelde om die verskil te verstaan.
Beide voorbeelde noem 'n metode twee keer, eers wanneer die bladsy laai, en weer eens wanneer die gebruiker 'n knoppie klik.
Die eerste voorbeeld gebruik 'n gewone funksie, en die tweede voorbeeld gebruik 'n pyltjie funksie.
Die resultaat toon dat die eerste voorbeeld twee verskillende voorwerpe (venster en knoppie) gee, en die tweede voorbeeld gee die venstervoorwerp twee keer terug, omdat die vensterobjek die "eienaar" van die funksie is.
Voorbeeld
Met 'n gewone funksie thisverteenwoordig die voorwerp wat die funksie oproep :
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Voorbeeld
Met 'n pyltjie thisverteenwoordig funksie die
eienaar van die funksie:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Onthou hierdie verskille wanneer jy met funksies werk. Soms is die gedrag van gereelde funksies wat jy wil hê, indien nie, gebruik pylfunksies.
Blaaierondersteuning
Die volgende tabel definieer die eerste blaaierweergawes met volle ondersteuning vir Arrow Functions in JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |