Funzioni JavaScript

Le funzioni JavaScript sono in grado non solo di racchiudere semplicemente una serie di codici in attesa che la chiamata venga eseguita. Le funzioni si sono evolute nel tempo portando a nuove definizioni, metodi di esecuzione e sintassi. Questo post tratterà alcuni dei ruoli attuali che le funzioni JavaScript hanno svolto finora.

Conoscere i diversi modi di esprimere e definire le funzioni apre la possibilità di implementare una logica in un modo più ottimale in JavaScript. Inoltre, potresti essere in grado di rispondere alle domande dell'intervista più facilmente.

Espressioni di funzioni

Quando si dichiara semplicemente una funzione con funzione parola chiave, parametri opzionali e corpo di codice, è a funzione dichiarazione.

Metti quella dichiarazione in un'espressione JavaScript (come in un compito o un'espressione aritmetica), diventa a funzione espressione.

// Funzione dichiarazione function function_name () ; // Funzione expression var function_name = function () ; 

Durante la valutazione vengono caricate tutte le dichiarazioni JavaScript (spostate verso l'alto). Quindi scrivendo una chiamata di funzione prima che la dichiarazione della funzione sia a posto (poiché la dichiarazione verrà spostata in ogni caso).

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

Le espressioni di funzione tuttavia non vengono issate poiché le funzioni diventano parte delle espressioni e non sono dichiarazioni autonome.

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

Espressione funzione Invocato immediatamente (IIFE)

È un'espressione di funzione, il cui codice viene eseguito immediatamente (solo una volta quando viene valutato). Puoi crearne uno semplicemente aggiungendo () (sintassi utilizzata per chiamare una funzione) subito dopo un'espressione di funzione. Possono essere anonimi (nessun nome con cui chiamarlo).

Di seguito sono riportate le due sintassi più comuni per creare IIFE:

(function optional_function_name () // body ()); 

e

(function optional_function_name () // body) (); 

La parentesi attorno alla dichiarazione della funzione lo converte in un'espressione e quindi in aggiunta () dopo chiama la funzione. Puoi usare altri modi per creare IIFE per tutto il tempo che aggiungi () dopo un'espressione di funzione (come sotto), ma i metodi preferiti sono i due precedenti.

// Alcuni modi per creare IIFE! Function () / * ... * / (); + function () / * ... * / (); nuova funzione () / * ... * /; 

IIFE è ideale per scrivere codice che deve essere eseguito una sola volta, namespacing, creazione di chiusure, creazione di variabili private e altro. Di seguito è riportato un esempio di utilizzo di IIFE.

var page_language = (function () var lang; // Codice per ottenere la lingua della pagina return lang;) (); 

Il codice per ottenere la lingua della pagina viene eseguito una sola volta (preferibilmente dopo il caricamento della pagina). Il risultato è archiviato in page_language per un uso successivo.

metodi

Quando una funzione è una proprietà di un oggetto, viene chiamata metodo. Poiché una funzione è anche un oggetto, anche una funzione all'interno di un'altra funzione è un metodo. Di seguito è riportato un esempio per un metodo all'interno dell'oggetto.

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

Il Inserisci e sub le funzioni sono metodi di calc oggetto.

Ora per una funzione nell'esempio di funzione:

function add (a) return function (b) return a + b; console.log (add (1) (2)); // L'uscita è 3 

La funzione anonima restituita è un metodo di funzione Inserisci.

Nota: dal parametro (un) di funzione Inserisci nell'esempio precedente è disponibile per la seguente funzione invoke, questo tipo di processo è chiamato accattivarsi.

Costruttori

Quando aggiungi nuovo parola chiave prima di una funzione e chiamarla, diventa un costruttore che crea istanze. Di seguito è riportato un esempio in cui vengono utilizzati i costruttori per creare istanze di Frutta e i valori sono aggiunti a ciascuno FruttaLe proprietà.

function Fruit () var name, family; // Nome scientifico e famiglia this.getName = function () return name;; this.setName = function (value) name = value; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var orange = new Fruit (); orange.setName ("Citrus à ??  ?? âAA?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus à ??  ?? âAA?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae " 

Funzioni freccia (standard ES6) [Solo in Firefox]

Una nuova definizione di funzione di ES6 Standard fornisce una sintassi più breve per l'espressione della funzione. La sintassi è

() => / * corpo * / 

Questa funzione di esempio:

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

equivale a:

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

Le funzioni di freccia sono anonime e non hanno il suo Questo valore, Questo al suo interno sarà uguale a Questo nel codice allegato. Inoltre, non puoi cambiarlo con un costruttore con nuovo parola chiave.

Sono utili per quando vuoi Questo all'interno di una funzione è uguale a quella esterna e la sua sintassi più breve rende il codice per la funzione di scrittura all'interno della funzione concisa (come di seguito)

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

in

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

Funzioni del generatore (standard ES6) [Solo in Firefox]

Un'altra nuova definizione di funzione di ES6 Standard è la funzione generatore. Le funzioni del generatore sono in grado di arrestarsi e continuare la sua esecuzione. La sua sintassi è:

function * function_name ()  

o

function * function_name ()  

Le funzioni del generatore creano iteratori. L'iteratore Il prossimo il metodo viene quindi utilizzato per eseguire il codice all'interno della funzione del generatore fino a dare la precedenza la parola chiave è stata raggiunta Successivamente, il valore iterato identificato dal dare la precedenza la parola chiave viene restituita dalla funzione generatore e l'esecuzione viene interrotta.

La funzione del generatore viene eseguita nuovamente quando il Il prossimo il metodo è chiamato fino al prossimo dare la precedenza la parola chiave è stata raggiunta Una volta tutto dare la precedenza le espressioni vengono eseguite, il rendimento restituito non definito.

Di seguito è riportato un semplice esempio:

function * generator_func (count) for (var i = 0; i 
Ecco un altro esempio:
 
function * randomIncrement (i) yield i + 3; resa i + 5; resa i + 10; resa i + 6;  var itr = randomIncrement (4); console.log (. itr.next () valore); // 7 console.log (itr.next (). Valore); // 9 console.log (itr.next (). Valore); // 14 
 
C'è anche a dare la precedenza* espressione che passa il valore ad un'altra funzione del generatore
 
funzione * frutta (frutta) resa * verdure (frutta); produrre "uva";  function * veggies (fruit) yield fruit + "and Spinach"; frutta resa + "e broccoli"; frutta resa + "e cetriolo";  var itr = fruits ("Apple"); console.log (. itr.next () valore); // "Apple and Spinach" console.log (itr.next (). Valore); // "Apple and Broccoli" console.log (itr.next (). Valore); // "Apple and Cucumber" console.log (itr.next (). Value); // "Grapes" console.log (itr.next (). Valore); //non definito 
 
Le funzioni del generatore sono utili se vuoi passare attraverso i valori uno per uno nel punto preferito del codice sospendendolo, piuttosto che in una volta come in un ciclo attraverso un array.
 
Conclusione
 
Ho incluso un elenco di riferimenti di seguito, in cui troverai collegamenti a riferimenti e articoli che approfondiscono separatamente argomenti diversi. Entrambe le funzioni standard ES6 funzioneranno solo in Firefox al momento.
 
Riferimenti
 
Linguaggio ECMAScript: funzioni e classi
 
Espressione funzione invocata immediatamente (IIFE)
 
Le basi dei generatori ES6
 
Funzioni della freccia
 
Funzione - Mozilla Developer Network