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







        

          
          

		  
Scopri la fotografia online gratuitamente dalla Harvard University
            
Vuoi diventare bravo in fotografia ma non hai nessuno che ti possa insegnare? Perché non apprendere le basi della fotografia dall'università di Harvard, dal momento che il corso di fotografia dell'istituzione è ora disponibile online gratuitamente .Disponibile come Massive Open Online Course (MOOC) offerto da ALISON, il corso di fotografia digitale dell'Università di Harvard ti insegnerà i fondamenti della fotografia, spaziando da argomenti come composizione, illuminazione e persino gli strumenti software che possono aiutarti con le tue foto. L&#
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
Come mantenere i tuoi bambini al sicuro su uno smartphone [Infografica]
            
Smartphone e tablet subiscono un brutto colpo quando si parla di utilizzo da parte dei bambini. Se hai mai visto un bambino incollato al loro iPad all'ora di cena invece di toccare il cibo, è facile capire perché. Ma qui su Hongkiat.com, consideriamo questi dispositivi come strumenti che ci aiutano a migliorare le nostre vite, anche a tenere i nostri figli al sicuro, e che siamo e dovremmo avere sempre il controllo.D
			
(Consigli tecnici e di design)