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







        

          
          

		  
10 librerie CSS per migliori effetti al passaggio del mouse sull'immagine
            
Permettere agli utenti di sapere facilmente quale parte della pagina web è cliccabile è una parte importante del design di UX. Il vecchio ma prezioso modo di farlo era cambiare il colore del testo e sottolinearlo. Oggigiorno, con i CSS, ci sono molti altri modi per fornire effetti al passaggio del mouse, in particolare alle immagini.G
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
15 gadget a comando vocale
            
Man mano che le tecnologie moderne diventano più intuitive, i produttori creano dispositivi che possono essere attivati ​​e controllati tramite tocco, gesti specifici e persino la propria voce . Oggi abbiamo deciso di condividere con voi un elenco di gadget tecnologici innovativi che possono essere attivati ​​dal suono della vostra voce.Questi g
			
(Consigli tecnici e di design)