Funcțiile JavaScript

Funcțiile JavaScript sunt capabile de mai mult decât să cuprindă doar o grămadă de coduri în timp ce așteaptă apelul de executat. Funcțiile au evoluat de-a lungul timpului, ducând la noi definiții, metode de execuție și sintaxe. Această postare va acoperi câteva din rolurile actuale pe care le-au jucat până în prezent funcțiile JavaScript.

Cunoașterea diferitelor modalități de exprimare și definire a funcțiilor deschide posibilitatea punerea în aplicare a unei logici într-un mod mai optim în JavaScript. De asemenea, este posibil să răspundeți mai ușor întrebărilor interviului.

Expresii de funcții

Când purtați simplu o funcție cu funcţie cuvântul cheie, parametrii opționali și corpul de cod, este a funcţie declaraţie.

Puneți această declarație într-o expresie JavaScript (ca într-o alocare sau expresie aritmetică), devine a funcţie expresie.

// funcția de declarare a funcției nume_funcție () ; // Expresia funcției var function_name = function () ; 

Toate declarațiile JavaScript sunt ridicate (deplasate în scop) în timpul evaluării. Prin urmare, scrierea unui apel pentru funcții înainte de declarația funcției este în regulă (deoarece declarația va fi mutată oricum).

funcția call_name (); // funcția apela funcția [WORKS] nume_funcție () ; 

Expresiile funcționale nu sunt totuși ridicate, deoarece funcțiile devin parte a expresiilor și nu sunt declarații independente.

function_name (); // functie apel [NU functioneaza] var function_name = function () ; 

Exprimarea funcției imediat invocate (IIFE)

Este o expresie a funcției, codul căruia se execută imediat (o singură dată când este evaluată). Puteți crea unul prin simpla adăugare () (sintaxa folosită pentru a apela o funcție) imediat după o expresie a funcției. Ele pot fi anonime (fără nume care să le numească).

Mai jos sunt cele două sintaxe cele mai comune pentru a crea IIFE:

(funcția optional_function_name () // body ()); 

și

(funcția optional_function_name () // body) (); 

Paranteza din jurul declarației funcției o convertește într-o expresie și apoi se adaugă () după ce apelează funcția. Puteți utiliza alte moduri de a crea IIFE pentru atâta timp cât adăugați () după o expresie a funcției (ca în cele de mai jos), dar metodele preferate sunt cele de mai sus.

// Unele dintre modalitățile de a crea funcția IIFE! () / * ... * / (); + funcția () / * ... * / (); funcție nouă () / * ... * /; 

IIFE este ideal pentru scrierea unui cod care trebuie executat doar o singură dată, crearea de intervale de nume, crearea de închideri, crearea de variabile private și multe altele. Mai jos este un exemplu de utilizare IIFE.

var page_language = (funcția () var lang; // Cod pentru a obține limba paginii return lang;) (); 

Codul pentru obținerea limbii paginii se execută o singură dată (de preferință după încărcarea paginii). Rezultatul este stocat în page_language pentru utilizare ulterioară.

metode

Atunci când o funcție este proprietatea unui obiect, se numește metoda. Deoarece o funcție este, de asemenea, un obiect, o funcție în interiorul unei alte funcții este, de asemenea, o metodă. Mai jos este un exemplu pentru o metodă în interiorul obiectului.

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

adăuga și Sub funcțiile sunt metode de Calc obiect.

Acum, pentru o funcție în cadrul funcției exemplu:

funcția adăugați (a) funcția de returnare (b) returnați a + b; console.log (adăugați (1) (2)); // Rezultatul este 3 

Funcția anonimă returnată este o metodă de funcționare adăuga.

Notă: Deoarece parametrul (A) de funcție adăuga în exemplul de mai sus este disponibil pentru următoarea funcție invoke, se numește acest tip de proces Prelucrare.

constructorilor

Când adăugați nou înainte de o funcție și apelați-o, devine un constructor care creează instanțe. Mai jos este un exemplu în care constructorii sunt utilizați pentru a crea instanțe de fruct iar valorile sunt adăugate la fiecare fruct's proprietăți.

funcția Fruit () var nume, familie; // numele și familia științifică this.getName = function () return name;; this.setName = funcție (valoare) name = value; this.getFamily = funcția () return family;; this.setFamily = funcție (valoare) familie = valoare;  var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var portocaliu = fructe noi (); orange.setName ("Citrus à ??  ?? â ??  ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus à ??  ?? â ??  ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae " 

Funcții cu săgeți (ES6 Standard) [Doar în Firefox]

O nouă definiție a funcției din ES6 Standard oferă o sintaxă mai scurtă pentru expresia funcției. Sintaxa este

() => / * corp * / 

Această funcție de eșantion:

var sing = funcția () console.log ('cântând ...'); 

este la fel ca:

var canta = () => console.log ('cântând ...'); 

Funcțiile săgeată sunt anonime și nu au propriile lor funcții acest valoare, acest în interiorul ei va fi același ca acest în codul anexat. De asemenea, nu îl puteți schimba la un constructor cu nou cuvinte cheie.

Ele sunt utile atunci când doriți acest în interiorul unei funcții care să fie aceeași cu cea din exterior și sintaxa ei mai scurtă face ca funcția de scriere a codului să funcționeze concis (cum este mai jos)

setInterval (funcția () console.log ('mesaj'), 1000); 

în

setInterval (() => console.log ("mesaj"), 1000); 

Funcțiile generatorului (standardul ES6) [Doar în Firefox]

O altă definiție nouă a funcției din ES6 Standard este funcția Generator. Funcțiile generatorului sunt capabile să se oprească și să continue executarea. Sintaxa sa este:

funcția * nume_funcție ()  

sau

funcția * nume_funcție ()  

Funcțiile generatoare creează iteratori. Iteratorul e Următor → metoda este apoi utilizată pentru a executa codul în interiorul funcției generatorului până la Randament cuvântul cheie este atins. După aceasta, valoarea iterativă identificată de către Randament cuvântul cheie este returnat de funcția generatorului și execuția este oprită.

Funcția generatorului se execută din nou când Următor → metoda este chemată până la următoarea Randament cuvântul cheie este atins. Odată ce toate Randament expresiile sunt executate, valoarea returnată revine nedefinit.

Mai jos este un exemplu simplu:

funcția * generator_func (număr) pentru (var i = 0; i 
Iată un alt exemplu:
 
funcția * randomIncrement (i) randamentul i + 3; randamentul i + 5; randamentul i + 10; randamentul i + 6;  var itr = randomIncrement (4); console.log (. itr.next () valoare); / / 7 console.log (itr.next (). Valoare); // 9 console.log (itr.next (). Valoare); // 14 
 
Există și a Randament* expresie care transmite valoarea la o altă funcție a generatorului
 
funcția * fructe (fructe) randament * legume (fructe); randament "Struguri";  funcția * legume (fructe) fructe de randament + "și spanac"; fructe de recoltă + "și broccoli"; obține fructe + "și castraveți";  var itr = fructe ("Apple"); console.log (. itr.next () valoare); // "Apple și spanac" console.log (itr.next (). Valoare); // "Apple și broccoli" console.log (itr.next (). Valoare); // "Apple și castraveți" console.log (itr.next (). Valoare); // "Struguri" console.log (itr.next (). Valoare); //nedefinit 
 
Funcțiile generatorului sunt utile dacă doriți să treceți valorile unul câte unul la punctul preferat al codului prin întreruperea acestuia, mai degrabă decât într-o singură mișcare, ca în looping printr-o matrice.
 
Concluzie
 
Am inclus o listă de referințe de mai jos, unde veți găsi linkuri către referințe și articole care se vor aprofunda pe diferite subiecte separat. Ambele funcții standard ES6 vor funcționa numai în Firefox în acest moment.
 
Referințe
 
Limbă ECMAScript: Funcții și clase
 
Exprimarea funcției imediat invocate (IIFE)
 
Elementele de bază ale generatoarelor ES6
 
Funcții cu săgeți
 
Funcţie - Rețeaua Mozilla pentru dezvoltatori