JavaScript-funktioner

JavaScript-funktioner kan mer än bara omsluta en massa koder medan du väntar på att samtalet ska utföras. Funktioner har utvecklats över tiden och leder till nya definitioner, exekveringsmetoder och syntaxer. Det här inlägget kommer att täcka några av de nuvarande rollerna JavaScript-funktioner har spelat hittills.

Att känna till de olika sätten att uttrycka och definiera funktioner öppnar möjligheten för implementera en logik på ett mer optimalt sätt i JavaScript. Du kanske också kan svara intervjufrågor lättare.

Funktionsuttryck

När du bara anger en funktion med fungera sökord, valfria parametrar och kodkod, det är a fungera deklaration.

Sätt den deklarationen i ett JavaScript-uttryck (som i ett uppdrag eller aritmetiskt uttryck) blir det en fungera uttryck.

// Funktionsdeklarationsfunktion funktionsnamn () ; // Funktionsuttryck var funktion_namn = funktion () ; 

Alla JavaScript-deklarationer hissas (flyttas inom ramen) under utvärderingen. Därför skriver du ett funktionssamtal innan funktionsdeklarationen är okej (eftersom deklarationen kommer att flyttas ändå).

funktionsnamn (); // funktionskall [WORKS] function function_name () ; 

Funktionsuttryck men hyses inte eftersom funktionerna ingår i uttrycket och inte är fristående deklarationer.

funktionsnamn (); // funktionskall [KOMMER INTE ARBETA] var function_name = function () ; 

Omedelbart uppkallad funktionsuttryck (IIFE)

Det är ett funktionsuttryck, vars kod utförs omedelbart (endast en gång när det utvärderas). Du kan skapa en genom att helt enkelt lägga till () (syntax som används för att ringa en funktion) direkt efter ett funktionsuttryck. De kan vara anonyma (inget namn att kalla det med).

Nedan finns de två vanligaste syntaxerna för att skapa IIFE:

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

och

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

Parametern kring funktionsdeklarationen omvandlar den till ett uttryck och lägger till () efter det ringer funktionen. Du kan använda andra sätt att skapa IIFE så länge du lägger till () efter ett funktionsuttryck (som nedan), men de föredragna metoderna är de två ovanstående.

// Några av sätten att skapa IIFEs! -Funktion () / * ... * / (); + funktion () / * ... * / (); ny funktion () / * ... * /; 

IIFE är idealisk för att skriva kod som bara behöver utföras en gång, namespacing, skapa stängningar, skapa privata variabler och mer. Nedan är ett exempel på IIFE-användning.

var page_language = (function () var lang; // Kod för att få språket på sidan return lang;) (); 

Koden för att få sidans språk körs endast en gång (helst efter att sidan laddas). Resultatet lagras i page_language för senare användning.

metoder

När en funktion är ett objekts egendom kallas det metod. Eftersom en funktion också är ett objekt, är en funktion i en annan funktion också en metod. Nedan är ett exempel på ett metod inom objektet.

var calc = add: 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 

De Lägg till och sub funktioner är metoder för calc objekt.

Nu för en funktion inom funktionsexempel:

funktion add (a) return function (b) return a + b; console.log (lägg till (1) (2)); // Utgång är 3 

Den returnerade anonyma funktionen är en metod för funktion Lägg till.

Obs! Eftersom parameter (en) av funktionen Lägg till i det ovanstående exemplet är tillgängligt för följande funktion åberopa, kallas denna typ av process currying.

konstruktörer

När du lägger till ny sökord före en funktion och kalla det, det blir en konstruktör som skapar instanser. Nedan är ett exempel där konstruktörer används för att skapa instanser av Frukt och värden läggs till vardera Frukts egenskaper.

funktion Frukt () var namn, familj; // Vetenskapligt namn och familj this.getName = function () return name;; this.setName = funktion (värde) name = value; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var apple = ny frukt (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); Var orange = Ny frukt (); 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) [Endast i Firefox]

En ny funktionsdefinition från ES6 Standard ger en kortare syntax för funktionsuttryck. Syntaxen är

() => / * kropp * / 

Denna provfunktion:

var sjung = funktion () console.log ('singing ...'); 

är det samma som:

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

Pilfunktionerna är anonyma och har inte egna detta värde, detta Inuti blir det samma som detta i den bifogade koden. Du kan inte heller ändra den till en konstruktör med ny nyckelord.

De är användbara för när du vill detta inuti en funktion som är densamma som ute och dess kortare syntax gör kod för skrivfunktion inom funktionskonsistens (som nedan)

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

in i

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

Generatorfunktioner (ES6 Standard) [Endast i Firefox]

En annan ny funktionsdefinition från ES6 Standard är Generator Function. Generatorfunktioner kan stoppa och fortsätta utföra det. Dess syntax är:

funktion * funktionsnamn ()  

eller

funktion * funktionsnamn ()  

Generatorfunktioner skapar iteratorer. Iteratorns Nästa Metoden används sedan för att köra koden inuti generatorfunktionen tills avkastning sökordet uppnås. Därefter, det itererade värdet identifierat av avkastning nyckelordet returneras av generatorfunktionen och körningen avbryts.

Generatorns funktion utförs igen när Nästa Metoden kallas till nästa avkastning sökordet uppnås. En gång alla avkastning uttryck exekveras, avkastningen returneras odefinierad.

Nedan är ett enkelt exempel:

funktion * generator_func (räkning) för (var i = 0; i 
Här är ett annat exempel:
 
funktion * randomIncrement (i) yield i + 3; utbyte i + 5; utbyte i + 10; utbyte i + 6;  var itr = randomIncrement (4); console.log (. itr.next () värde); // 7 console.log (itr.next (). Värde); // 9 console.log (itr.next (). Värde); // 14 
 
Det finns också en avkastning* uttryck som överför värdet till en annan generatorfunktion
 
funktion * frukt (frukt) utbyte * grönsaker (frukt); utbyte "druvor";  funktion * grönsaker (frukt) ge frukt + "och spenat"; ge frukt + "och Broccoli"; ge frukt + "och gurka";  var itr = frukter ("Apple"); console.log (. itr.next () värde); // "Apple och Spinat" console.log (itr.next (). Värde); // "Apple och Broccoli" console.log (itr.next (). Värde); // "Apple och gurka" console.log (itr.next (). Värde); // "Druvor" console.log (itr.next (). Värde); //odefinierad 
 
Generatorfunktionerna är användbara om du vill gå igenom värden en efter en på din föredragna punkt i koden genom att pausa den, snarare än på ett och samma sätt som i looping genom en array.
 
Slutsats
 
Jag har tagit med en lista med referenser nedan, där du hittar länkar till referenser och artiklar som går djupt på olika ämnen separat. Både ES6-standardfunktionerna fungerar bara i Firefox för tillfället.
 
referenser
 
ECMAScript Språk: Funktioner och klasser
 
Omedelbart uppmanad funktionsuttryck (IIFE)
 
Grunderna för ES6-generatorer
 
Pilfunktioner
 
Fungera - Mozilla Developer Network