JavaScript funktioner

JavaScript-funktioner kan mere end blot vedlægge en flok koder, mens de venter på opkaldet til at udføre. Funktionerne har udviklet sig over tid, hvilket fører til nye definitioner, eksekveringsmetoder og syntakser. Dette indlæg vil dække nogle af de nuværende roller JavaScript-funktioner har spillet indtil videre.

At kende de forskellige måder at udtrykke og definere funktioner på åbner mulighed for implementere en logik på en mere optimal måde i JavaScript. Du kan også være i stand til at besvare interview spørgsmål lettere.

Funktionsudtryk

Når du blot angiver en funktion med fungere søgeord, valgfrie parametre og krops kode, det er en fungere erklæring.

Sæt denne erklæring i et JavaScript-udtryk (som i en opgave eller et aritmetisk udtryk) bliver det en fungere ekspression.

// Funktionsdeklarationsfunktion funktionnavn () ; // Funktion udtryk var function_name = function () ;

Alle JavaScript-erklæringer hæves (flyttes op i omfanget) under evalueringen. Derfor skrives et funktionsopkald før funktionsdeklarationen er okay (da erklæringen vil blive flyttet alligevel).

funktionnavn (); // funktionskald [WORKS] function function_name () ;

Funktionseksempler hæves dog ikke, da funktionerne bliver en del af udtrykkene og ikke er stand-alone erklæringer.

function_name (); // funktion opkald [WILL NOT WORK] var function_name = function () ;

Umiddelbart påkaldt funktionsudtryk (IIFE)

Det er et funktionsudtryk, hvis kode bliver udført straks (kun en gang, når den er evalueret). Du kan oprette en ved blot at tilføje () (syntax bruges til at kalde en funktion) lige efter et funktionsudtryk. De kan være anonyme (ingen navn til at kalde det med).

Nedenfor er de to mest almindelige syntakser for at oprette IIFE:

(funktion optional_function_name () // body ());

(funktion optional_function_name () // body) ();

Parameteren omkring funktionsdeklarationen konverterer den til et udtryk og derefter tilføjer () efter det kalder funktionen. Du kan bruge andre måder at oprette IIFE på, så længe du tilføjer () efter et funktionsudtryk (som nedenfor), men de foretrukne metoder er de ovennævnte to.

// Nogle af måder at oprette IIFEs! Funktion () / * ... * / (); + funktion () / * ... * / (); ny funktion () / * ... * /;

IIFE er ideel til at skrive kode, der kun skal udføres én gang, namespacing, skabe lukninger, skabe private variabler og meget mere. Nedenfor er et eksempel på IIFE brug.

var page_language = (function () var lang; // Kode for at få sproget på siden return lang;) ();

Koden for at få sidens sprog udføres kun én gang (helst efter at siden er indlæst). Resultatet er gemt i page_language til senere brug.

Metoder

Når en funktion er en objekts ejendom, kaldes den metode. Da en funktion også er en genstand, er en funktion i en anden funktion også en metode. Nedenfor er et eksempel på en metode indenfor objekt.

var calc = tilføj: funktion (a, b) return a + b, sub: funktion (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

Det tilføje og sub funktioner er metoder til calc objekt.

Nu for en funktion inden for funktion eksempel:

funktion tilføj (a) returfunktion (b) return a + b; console.log (tilføj (1) (2)); // Output er 3

Den returnerede anonyme funktion er en metode til funktion tilføje.

Bemærk: Siden parameter (-en) af funktionen tilføje I ovenstående eksempel er tilgængelig for følgende funktion påberåbe, kaldes denne type proces beredningsmetode.

Constructors

Når du tilføjer ny søgeord før en funktion og kalder det, bliver det en konstruktør der skaber forekomster. Nedenfor er et eksempel, hvor konstruktorer bruges til at oprette forekomster af Frugt og værdier tilføjes til hver Frugts egenskaber.

funktion Frugt () var navn, familie; // Videnskabeligt navn & familie this.getName = function () return name;; this.setName = funktion (værdi) name = value; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var apple = ny frugt (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); Var orange = Ny Frugt (); orange.setName ("Citrus Ã? Â ?? Ã¢Â ?? â ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus "¢Â ?? â ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae "

Pilfunktioner (ES6 Standard) [Kun i Firefox]

En ny funktionsdefinition fra ES6 Standard giver en kortere syntaks for funktionsudtryk. Syntaxen er

() => / * body * /

Denne prøvefunktion:

var sing = function () console.log ('synger ...');

er det samme som:

var sing = () => console.log ('synger ...');

Pilfunktioner er anonyme og har ikke sin egen dette værdi, dette inde i det vil være det samme som dette i den vedhæftende kode. Du kan heller ikke ændre det til en konstruktør med ny søgeord.

De er nyttige til, når du vil dette inde i en funktion er den samme som udenfor, og dens kortere syntaks gør kode til skrivefunktion inden for funktionskoncept (som nedenfor)

setInterval (funktion () console.log ('message'), 1000);

ind i

setInterval (() => console.log ('message'), 1000);

Generatorfunktioner (ES6 Standard) [Kun i Firefox]

En anden ny funktionsdefinition fra ES6 Standard er Generator Function. Generatorfunktioner kan standse og fortsætte udførelsen. Dens syntaks er:

funktion * function_name ()

eller

funktion * function_name ()

Generatorfunktioner skaber iteratorer. Iteratoren er Næste Metoden bruges derefter til at udføre koden inde i generatorfunktionen indtil udbytte søgeord er nået. Herefter er den itererede værdi identificeret af udbytte Nøgleordet returneres af generatorfunktionen, og udførelsen stoppes.

Generatorfunktionen udføres igen når Næste metode kaldes til den næste udbytte søgeord er nået. Når alle de udbytte udtryk udføres, den returnerede værdi returnerer undefined.

Nedenfor er et simpelt eksempel:

funktion * generator_func (tæller) for (var i = 0; i Her er et andet eksempel:
 funktion * randomIncrement (i) udbytte i + 3; udbytte i + 5; udbytte i + 10; udbytte i + 6;  var itr = randomIncrement (4); console.log (. itr.next () værdi); // 7 console.log (itr.next (). Værdi); // 9 console.log (itr.next (). Værdi); // 14 
 Der er også en udbytte* udtryk, der overfører værdien til en anden generatorfunktion
 funktion * frugt (frugt) udbytte * veggies (frugt); udbytte "Druer";  funktion * veggies (frugt) udbytte frugt + "og spinat"; udbytte frugt + "og broccoli"; udbytte frugt + "og agurk";  var itr = frugt ("apple"); console.log (. itr.next () værdi); // "Apple og Spinat" console.log (itr.next (). Værdi); // "Apple og Broccoli" console.log (itr.next (). Værdi); // "Apple og agurk" console.log (itr.next (). Værdi); // "Druer" console.log (itr.next (). Værdi); // undefined 
 Generatorfunktioner er nyttige, hvis du vil gennemgå værdier en efter en på dit foretrukne punkt i koden ved at pause det, snarere end på én gang som i looping gennem en matrix.
 Konklusion
 Jeg har medtaget en liste over referencer nedenfor, hvor du finder links til referencer og artikler, der går indgående om forskellige emner separat. Både ES6-standardfunktionerne fungerer kun i Firefox i øjeblikket.
 Referencer
 ECMAScript Sprog: Funktioner og Klasser
 Umiddelbart påkaldt funktionsudtryk (IIFE)
 Grundlæggende om ES6 Generatorer
 Pile funktioner
 Fungere - Mozilla Developer Network