JavaScript-funksjoner

JavaScript-funksjoner er i stand til mer enn bare å omslutte en rekke koder mens du venter på at anropet skal utføres. Funksjoner har utviklet seg over tid som fører til nye definisjoner, utførelsesmetoder og syntakser. Dette innlegget vil dekke noen av de nåværende rollene JavaScript-funksjonene har spilt så langt.

Å kjenne de forskjellige måtene å uttrykke og definere funksjoner åpner muligheten for implementere en logikk på en mer optimal måte i JavaScript. Du kan også være i stand til å svare på intervjuevilkårene lettere.

Funksjonsuttrykk

Når du bare oppgir en funksjon med funksjon søkeord, valgfrie parametere og kodenavn, det er en funksjon erklæring.

Sett denne erklæringen i et JavaScript-uttrykk (som i en oppgave eller et aritmetisk uttrykk), blir det en funksjon uttrykk.

// Funksjonsdeklarasjonsfunksjon funksjonnavn () ; // Funksjon uttrykk var function_name = funksjon () ; 

Alle JavaScript-erklæringer heises (flyttes opp i omfanget) under evaluering. Derfor skriver du et funksjonsanrop før funksjonen erklæring er i orden (siden erklæringen vil bli flyttet uansett).

funksjonsnavn (); // funksjonsanrop [WORKS] function function_name () ; 

Funksjonsuttrykk blir imidlertid ikke heiset siden funksjonene blir en del av uttrykkene og ikke er frittstående erklæringer.

funksjonsnavn (); // funksjonsanrop [WILL NOT WORK] var function_name = function () ; 

Umiddelbart påkallt funksjonsuttrykk (IIFE)

Det er et funksjonsuttrykk, koden som blir utført umiddelbart (bare en gang når den er evaluert). Du kan opprette en ved å legge til () (syntaks brukt til å ringe en funksjon) rett etter et funksjonsuttrykk. De kan være anonyme (ikke noe å ringe med).

Nedenfor er de to vanligste syntaksene for å lage IIFE:

(funksjon optional_function_name () // body ()); 

og

(funksjon optional_function_name () // body) (); 

Parentesen rundt funksjonsdeklarasjonen konverterer den til et uttrykk og deretter legger til () etter det kaller funksjonen. Du kan bruke andre måter å lage IIFE så lenge du legger til () etter et funksjonsuttrykk (som nedenfor), men de foretrukne metodene er de to ovenfor.

// Noen av måtene å opprette IIFEs! -Funksjon () / * ... * / (); + funksjon () / * ... * / (); ny funksjon () / * ... * /; 

IIFE er ideell for å skrive kode som bare må utføres én gang, namespacing, opprette nedleggelser, opprette private variabler og mer. Nedenfor er et eksempel på IIFE bruk.

var page_language = (function () var lang; // Kode for å få språket til siden return lang;) (); 

Koden for å få sidenes språk utføres kun én gang (helst etter at siden laster). Resultatet er lagret i page_language for senere bruk.

metoder

Når en funksjon er en objekts eiendom, kalles den metode. Siden en funksjon er også et objekt, er en funksjon i en annen funksjon også en metode. Nedenfor er et eksempel på en metode inne i objektet.

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

De Legg til og under Funksjoner er metoder for calc gjenstand.

Nå for en funksjon i funksjonseksempel:

funksjon legg til (a) returfunksjon (b) return a + b; console.log (legg til (1) (2)); // Output er 3 

Den returnerte anonyme funksjonen er en funksjonsmetode Legg til.

Merk: Siden parameteren (en) av funksjonen Legg til I eksemplet ovenfor er tilgjengelig for følgende funksjon påberope, kalles denne typen prosess currying.

Constructors

Når du legger til ny søkeord før en funksjon og kalle det, blir det en konstruktør som skaper forekomster. Nedenfor er et eksempel hvor konstruktører brukes til å lage forekomster av Frukt og verdier legges til hver Frukts egenskaper.

funksjon frukt () var navn, familie; // Vitenskapelig navn og familie this.getName = function () returnavn;; this.setName = funksjon (verdi) name = value; this.getFamily = function () return family;; this.setFamily = funksjon (verdi) family = value;  var apple = ny frukt (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var oransje = 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 " 

Pil Funksjoner (ES6 Standard) [Bare i Firefox]

En ny funksjonsdefinisjon fra ES6 Standard gir et kortere syntax for funksjonsuttrykk. Syntaxen er

() => / * kropp * / 

Denne prøvefunksjonen:

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

er det samme som:

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

Pilfunksjonene er anonyme og har ikke egen dette verdi, dette inne i det vil være det samme som dette i den vedlagte koden. Du kan heller ikke endre den til en konstruktør med ny søkeord.

De er nyttige for når du vil dette inne i en funksjon som den samme som utenfor, og dens kortere syntaks gjør kode for å skrive funksjon innen funksjonskonsept (som nedenfor)

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

inn i

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

Generator Funksjoner (ES6 Standard) [Bare i Firefox]

En annen ny definisjon fra ES6 Standard er Generator Function. Generatorfunksjoner er i stand til å stoppe og fortsette gjennomføringen. Syntaxen er:

funksjon * funksjonsnavn ()  

eller

funksjon * funksjonsnavn ()  

Generatorfunksjoner oppretter iteratorer. Iteratoren er neste Metoden brukes da til å utføre koden inne i generatorfunksjonen til utbytte søkeordet er nådd. Etter det blir den itererte verdien identifisert av utbytte Søkeordet returneres av generatorfunksjonen og utførelsen stoppes.

Generatorfunksjonen utføres igjen når neste Metoden kalles til neste utbytte søkeordet er nådd. En gang alle utbytte uttrykk utføres, den returnerte verdien returnerer udefinert.

Nedenfor er et enkelt eksempel:

funksjon * generator_func (telle) for (var i = 0; i 
Her er et annet eksempel:
 
funksjon * randomIncrement (i) yield i + 3; gi i + 5; gi jeg + 10; gi i + 6;  var itr = randomIncrement (4); console.log (. itr.next Verdien ()); // 7 console.log (itr.next (). Verdi); // 9 console.log (itr.next (). Verdi); // 14 
 
Det er også en utbytte* uttrykk som overfører verdien til en annen generatorfunksjon
 
funksjon * frukt (frukt) utbytte * veggies (frukt); gi "druer";  funksjon * veggies (frukt) gi frukt + "og spinat"; gi frukt + "og brokkoli"; gi frukt + "og agurk";  var itr = frukt ("Apple"); console.log (. itr.next Verdien ()); // "Apple og Spinat" console.log (itr.next (). Verdi); // "Apple og Broccoli" console.log (itr.next (). Verdi); // "Apple og agurk" console.log (itr.next (). Verdi); // "Druer" console.log (itr.next (). Verdi); // udefinert 
 
Generatorfunksjoner er nyttige hvis du vil gå gjennom verdiene en etter en på ditt foretrukne punkt i koden ved å pause den, i stedet for på en gang som i looping gjennom en matrise.
 
Konklusjon
 
Jeg har tatt med en liste over referanser under, der du finner lenker til referanser og artikler som går i dybden om ulike temaer hver for seg. Begge ES6-standardfunksjonene fungerer bare i Firefox for øyeblikket.
 
referanser
 
ECMAScript Språk: Funksjoner og klasser
 
Umiddelbart påkalt funksjonsuttrykk (IIFE)
 
Grunnleggende om ES6 Generatorer
 
Pilfunksjoner
 
Funksjon - Mozilla Developer Network