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 specifica semplicemente una funzione con la parola chiave function, i parametri opzionali e il body of code, si tratta di una dichiarazione di funzione .

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

 // Funzione dichiarazione function nome_funzione () {}; // Funzione expression var function_name = function () {}; 

Durante la valutazione, tutte le dichiarazioni JavaScript vengono issate (spostate verso l'alto). Quindi scrivere una chiamata di funzione prima che la dichiarazione della funzione sia corretta (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 usata 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 che 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 è memorizzato 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 ab}} console.log (calc.add (1, 2)); // 3 console.log (calc.sub (80, 2)); // 78 

Le funzioni add e sub sono metodi di calc object.

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 add .

Nota: Poiché il parametro ( a ) della funzione add dell'esempio precedente è disponibile per la seguente funzione invoke, questo tipo di processo viene chiamato currying .

Costruttori

Quando aggiungi una new parola chiave prima di una funzione e la chiami, diventa un costruttore che crea istanze. Di seguito è riportato un esempio in cui i costruttori vengono utilizzati per creare istanze di Fruit e i valori vengono aggiunti alle proprietà di ogni Fruit .

 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 ࢠÂ? Â" sinensis "); orange.setFamily ("Rutaceae"); console.log (orange.getName ()); // "Citrus ࢠÂ? Â" 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 proprio valore, this all'interno sarà uguale al codice allegato. Inoltre, non puoi cambiarlo con un costruttore con una new parola chiave.

Sono utili per quando si desidera che all'interno di una funzione sia uguale a quella esterna e la sintassi più breve faccia in modo che il codice per scrivere funzioni 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. Il next metodo dell'iteratore viene quindi utilizzato per eseguire il codice all'interno della funzione del generatore fino a quando non viene raggiunta la parola chiave yield . Successivamente, il valore iterato identificato dalla parola chiave yield viene restituito dalla funzione generatore e l'esecuzione viene interrotta.

La funzione generatore viene eseguita nuovamente quando viene chiamato il metodo next fino a quando viene raggiunta la prossima parola chiave yield . Una volta eseguite tutte le espressioni di yield, il valore restituito undefined .

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 
Esiste anche un'espressione yield* che trasmette il valore a 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 (). Value); // "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 si desidera passare i valori uno alla volta 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 
Lingua ECMAScript: funzioni e classi
Espressione funzione invocata immediatamente (IIFE)
Le basi dei generatori ES6
Funzioni della freccia
Funzione - Mozilla Developer Network







        

          
          

		  
12 app Android per giocare a giochi retrò classici
            
Super Mario, Outrun, Duck Hunt, Donkey Kong ecc. Sono stati tra i videogiochi più famosi e più influenti di tutti i tempi. Ci sono stati momenti in cui giocavamo a questi giochi attraverso le console di gioco classiche, tuttavia, questi giochi retrò possono ancora essere riprodotti solo con il tuo Android.Re
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
Guida definitiva per impostare il tuo primo negozio online
            
L'e-commerce è la tendenza aziendale più popolare nella nostra società futuristica, poiché la maggior parte delle città moderne dispone di Internet ed è un processo così semplice per inviare pagamenti in tutto il mondo tramite la connessione Internet. Insieme a queste tecnologie sono cresciuti centinaia di migliaia di nuovi negozi web digitali che vendono prodotti fisici e digitali in un unico mercato globale.Busine
			
(Consigli tecnici e di design)