Funkcije JavaScripta

JavaScript funkcije su sposobne za više od pukog zatvaranja hrpe kodova dok čekaju da se poziv izvrši. Funkcije su se vremenom razvijale, dovodeći do novih definicija, metoda izvršenja i sintakse. Ovaj post će pokriti neke od postojećih uloga koje su JavaScript funkcije do sada odigrale.

Poznavanje različitih načina izražavanja i definiranja funkcija otvara mogućnost uvođenje logike na optimalniji način u JavaScriptu. Također, možete lakše odgovoriti na pitanja intervjua.

Izrazi funkcija

Kada jednostavno navedete funkciju s funkcija ključna riječ, neobvezni parametri i tijelo koda, a funkcija deklaracija.

Stavite tu izjavu u JavaScript izraz (kao u zadatku ili aritmetičkom izrazu), on postaje a funkcija izraz.

// funkcija funkcije function_name () ; // Funkcijski izraz var function_name = function () ; 

Sve JavaScript izjave su podignute (pomaknute u opsegu) tijekom evaluacije. Stoga pisanje poziva funkcije prije deklaracije funkcije je u redu (budući da će deklaracija ionako biti premještena).

function_name (); // funkcija call [WORKS] funkcija function_name () ; 

Izrazi funkcija, međutim, nisu podignuti jer funkcije postaju dio izraza i nisu samostalne deklaracije.

function_name (); // funkcijski poziv [WON'T WORK] var function_name = function () ; 

Odmah pozvani izraz funkcije (IIFE)

To je izraz funkcije, kod kojeg se izvršava odmah (samo jednom kada se procijeni). Možete je izraditi jednostavnim dodavanjem () (sintaksa koja se koristi za pozivanje funkcije) odmah nakon izraza funkcije. Oni mogu biti anonimni (bez naziva s).

U nastavku su dvije najčešće korištene sintakse za stvaranje IIFE-a:

(funkcija optional_function_name () // tijelo ()); 

i

(funkcija optional_function_name () // body) (); 

U zagradama oko deklaracije funkcije pretvara ga u izraz i zatim dodaje () nakon poziva funkcije. Možete koristiti druge načine za stvaranje IIFE-a onoliko dugo koliko dodate () nakon ekspresije funkcije (kao ispod), ali preferirane metode su gore navedene dvije.

// Neki od načina stvaranja funkcije IIFEs! () / *… * / (); + funkcija () / *… * / (); nova funkcija () / *… * /; 

IIFE je idealan za pisanje koda koji se mora izvršiti samo jednom, prostor za imenovanje, stvaranje zatvarača, stvaranje privatnih varijabli i još mnogo toga. U nastavku je naveden primjer korištenja IIFE-a.

var page_language = (funkcija () var lang; / Kod za dobivanje jezika stranice lang;) (); 

Kôd za dobivanje jezika stranice izvršava se samo jednom (po mogućnosti nakon učitavanja stranice). Rezultat je pohranjen u page_language za kasniju uporabu.

metode

Kada je funkcija svojstvo objekta, ona se naziva metoda. Budući da je funkcija i objekt, funkcija unutar druge funkcije je također metoda. U nastavku je primjer metode unutar objekta.

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

dodati i pod funkcije su metode kale objekt.

Sada za funkciju u primjeru funkcije:

funkcija dodaj (a) povratna funkcija (b) povratak a + b; console.log (dodaj (1) (2)); // Izlaz je 3 

Vraćena anonimna funkcija je metoda funkcije dodati.

Napomena: od parametra () funkcije dodati u gornjem primjeru je dostupan za sljedeću funkciju poziva, ovaj tip procesa se zove currying.

graditelji

Kada dodate novi ključnu riječ prije funkcije i nazovite je, ona postaje konstruktor koji stvara instance. U nastavku je primjer gdje se konstruktori koriste za stvaranje primjeraka Voće i vrijednosti se dodaju svakom od njih Voćesvojstva.

function Fruit () var ime, obitelj; // Znanstveni naziv i obitelj this.getName = function () return name;; this.setName = funkcija (vrijednost) name = value; this.getFamily = function () return family;; this.setFamily = funkcija (vrijednost) obitelj = vrijednost;  var apple = new Voće (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var orange = novo voće (); orange.setName ("Citrus")¢Â ??  ?? console.log (orange.getName ()); // "Citrus Ã?  ?? â ??  ?? // "Malus domestica" console.log (orange.getFamily ()); // "Rutaceae" 

Funkcije strelica (ES6 standard) [Samo u Firefoxu]

Nova definicija funkcije iz ES6 Standarda pruža kraću sintaksu za funkcijski izraz. Sintaksa je

() => / * tijelo * / 

Ova funkcija uzorka:

var sing = function () console.log ('pjevanje…'); 

isti je kao:

var sing = () => console.log ('pjevanje…'); 

Funkcije strelica su anonimne i nemaju svoje ovaj vrijednost, ovaj unutra će biti isto kao i ovaj u priloženom kodu. Također, ne možete ga promijeniti s konstruktorom novi ključna riječ.

Oni su korisni kada želite ovaj unutar funkcije biti isti kao i vani i njegova kraća sintaksa čini kod za pisanje funkcija unutar funkcije sažeto (kao u nastavku)

setInterval (funkcija () console.log ('poruka'), 1000); 

u

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

Generatorske funkcije (ES6 standard) [samo u Firefoxu]

Još jedna nova definicija funkcije iz standarda ES6 je funkcija generatora. Funkcije generatora mogu zaustaviti i nastaviti njegovo izvršavanje. Sintaksa je:

funkcija * function_name ()  

ili

funkcija * function_name ()  

Generatorske funkcije stvaraju iteratore. Iteratori Sljedeći Metoda se tada koristi za izvršavanje koda unutar funkcije generatora sve do prinos dosegnuta je ključna riječ. Nakon toga, ponavljana vrijednost koju je identificirao prinos ključna riječ vraća funkcija generatora i izvršenje je zaustavljeno.

Funkcija generatora se ponovno izvršava kada Sljedeći metoda zove se do sljedećeg prinos dosegnuta je ključna riječ. Nakon svih prinos izraze, vraća se dobivena vrijednost nedefiniran.

U nastavku je jednostavan primjer:

funkcija * generator_func (count) za (var i = 0; i 
Evo još jednog primjera:
 
funkcija * randomIncrement (i) prinos i + 3; prinos i + 5; prinos i + 10; prinos i + 6;  var itr = randomIncrement (4); console.log (, itr.next () vrijednosti); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 
Tu je i a prinos* izraz koji prosljeđuje vrijednost drugoj funkciji generatora
 
funkcija * voće (voće) prinos * povrće (voće); prinos "Grožđe";  funkcija * povrće (voće) donose voće + "i špinat"; donose voće + "i brokule"; donose voće + "i krastavac";  var itr = plodovi ("jabuka"); console.log (, itr.next () vrijednosti); // "Apple i spinach" console.log (itr.next (). Value); // "Apple i Broccoli" console.log (itr.next (). Value); // "Apple i krastavac" console.log (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); //nedefiniran 
 
Funkcije generatora korisne su ako želite proći kroz vrijednosti jednu po jednu na željenu točku u kodu pauziranjem, a ne jednim pokretom kao u petlji kroz niz.
 
Zaključak
 
U nastavku sam naveo popis referenci, gdje ćete naći linkove na reference i članke koji se detaljno obrađuju na različite teme odvojeno. Obje ES6 standardne funkcije trenutno će raditi samo u Firefoxu.
 
Reference
 
ECMAScript jezik: funkcije i klase
 
Odmah pozvani izraz funkcije (IIFE)
 
Osnove ES6 generatora
 
Funkcije strelice
 
Funkcija - Mozilla Developer Network