Esercitazione JS

JS CASA JS Introduzione JS Dove si va Uscita JS Dichiarazioni JS Sintassi JS Commenti JS Variabili JS JS Let JS Cost Operatori JS JS aritmetica Assegnazione JS Tipi di dati JS Funzioni JS Oggetti JS Eventi JS Corde JS Metodi di stringa JS Ricerca di stringhe JS Modelli di stringhe JS Numeri JS Metodi numerici JS Matrici JS Metodi array JS Ordinamento matrice JS Iterazione dell'array JS Cost. array JS Date JS Formati data JS Metodi di acquisizione della data JS Metodi di impostazione della data JS JS matematica JS Casuale JS booleani Confronti JS Condizioni JS JS Switch Ciclo JS per JS Loop per In Ciclo JS per di JS Loop mentre JS Break Iterabili JS Insiemi JS Mappe JS Tipo JS Conversione del tipo JS JS bit a bit JS RegExp Errori JS Ambito JS JS sollevamento Modalità rigorosa JS JS questa parola chiave Funzione freccia JS Classi JS JS JSON Debug JS Guida allo stile JS Migliori Pratiche JS Errori di JS Prestazioni JS Parole riservate JS

Versioni JS

Versioni JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Storia di JS

Oggetti JS

Definizioni di oggetti Proprietà dell'oggetto Metodi dell'oggetto Visualizzazione di oggetti Accessori per oggetti Costruttori di oggetti Prototipi di oggetti Iterabili di oggetti Insiemi di oggetti Mappe degli oggetti Riferimento all'oggetto

Funzioni JS

Definizioni delle funzioni Parametri di funzione Invocazione di funzione Chiamata di funzione Funzione Applica Chiusure di funzioni

Classi JS

Introduzione alla classe Eredità di classe Classe statica

JS Async

Richiamate JS JS asincrono JS Promesse JS Async/Attendere

JS HTML DOM

DOM Introduzione Metodi DOM Documento DOM Elementi DOM DOM HTML Moduli DOM DOM CSS Animazioni DOM Eventi DOM Ascoltatore di eventi DOM Navigazione DOM Nodi DOM Collezioni DOM Elenchi di nodi DOM

Distinta base del browser JS

Finestra JS Schermo JS Posizione JS Storia di JS Navigatore JS Avviso popup JS JS tempismo Biscotti JS

API Web JS

Introduzione all'API Web API dei moduli Web API Cronologia web API di archiviazione Web API Web Worker API di recupero Web API di geolocalizzazione web

JS AJAX

Introduzione all'Ajax AJAX XMLHttp Richiesta AJAX Risposta dell'AJAX File XML AJAX AJAX PHP AJAX ASP Database AJAX Applicazioni AJAX Esempi AJAX

JS JSON

Introduzione JSON Sintassi JSON JSON contro XML Tipi di dati JSON Analisi JSON JSON Stringify Oggetti JSON Matrici JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selettori jQuery jQuery HTML jQuery CSS jQuery DOM

Grafica JS

Grafica JS Tela JS JS Plotly JS Chart.js Grafico di Google JS JS D3.js

Esempi JS

Esempi JS JS HTML DOM Input HTML JS Oggetti HTML JS Eventi HTML JS Browser JS Editore JS Esercizi JS Quiz J.S Certificato JS

Riferimenti JS

Oggetti JavaScript Oggetti HTML DOM


Chiusure JavaScript


Le variabili JavaScript possono appartenere all'ambito locale o globale .

Le variabili globali possono essere rese locali (private) con chiusure .


Variabili globali

A functionpuò accedere a tutte le variabili definite all'interno della funzione, in questo modo:

Esempio

function myFunction() {
  let a = 4;
  return a * a;
}

Ma a functionpuò anche accedere a variabili definite al di fuori della funzione, in questo modo:

Esempio

let a = 4;
function myFunction() {
  return a * a;
}

Nell'ultimo esempio, a è una variabile globale .

In una pagina web, le variabili globali appartengono all'oggetto finestra.

Le variabili globali possono essere utilizzate (e modificate) da tutti gli script nella pagina (e nella finestra).

Nel primo esempio, a è una variabile locale .

Una variabile locale può essere utilizzata solo all'interno della funzione in cui è definita. È nascosto da altre funzioni e altro codice di scripting.

Le variabili globali e locali con lo stesso nome sono variabili diverse. Modificandone uno, non si modifica l'altro.

Le variabili create senza una parola chiave di dichiarazione ( var, let, o const) sono sempre globali, anche se vengono create all'interno di una funzione.

Esempio

function myFunction() {
  a = 4;
}


Durata variabile

Le variabili globali sono attive fino a quando la pagina non viene eliminata, come quando si passa a un'altra pagina o si chiude la finestra.

Le variabili locali hanno vita breve. Vengono creati quando la funzione viene richiamata ed eliminati al termine della funzione.


Un controdilemma

Supponiamo di voler usare una variabile per contare qualcosa e di volere che questo contatore sia disponibile per tutte le funzioni.

Potresti usare una variabile globale e una functionper aumentare il contatore:

Esempio

// Initiate counter
let counter = 0;

// Function to increment counter
function add() {
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The counter should now be 3

C'è un problema con la soluzione sopra: qualsiasi codice nella pagina può cambiare il contatore, senza chiamare add().

Il contatore dovrebbe essere locale alla add()funzione, per evitare che altro codice lo modifichi:

Esempio

// Initiate counter
let counter = 0;

// Function to increment counter
function add() {
  let counter = 0;
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 0

Non ha funzionato perché visualizziamo il contatore globale invece del contatore locale.

Possiamo rimuovere il contatore globale e accedere al contatore locale lasciando che la funzione lo restituisca:

Esempio

// Function to increment counter
function add() {
  let counter = 0;
  counter += 1;
  return counter;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 1.

Non ha funzionato perché azzeriamo il contatore locale ogni volta che chiamiamo la funzione.

 Una funzione interna di JavaScript può risolvere questo problema.


Funzioni nidificate JavaScript

Tutte le funzioni hanno accesso all'ambito globale.  

Infatti, in JavaScript, tutte le funzioni hanno accesso all'ambito "sopra" di esse.

JavaScript supporta le funzioni nidificate. Le funzioni nidificate hanno accesso all'ambito "sopra" di esse.

In questo esempio, la funzione interna plus()ha accesso alla countervariabile nella funzione genitore:

Esempio

function add() {
  let counter = 0;
  function plus() {counter += 1;}
  plus();   
  return counter;
}

Ciò avrebbe potuto risolvere il controdilemma, se potessimo raggiungere la plus() funzione dall'esterno.

Abbiamo anche bisogno di trovare un modo per eseguire counter = 0solo una volta.

Abbiamo bisogno di una chiusura.


Chiusure JavaScript

Ricordi le funzioni di auto-invocazione? Cosa fa questa funzione?

Esempio

const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

// the counter is now 3

Esempio spiegato

La variabile addviene assegnata al valore di ritorno di una funzione auto-invocabile.

La funzione di richiamo automatico viene eseguita una sola volta. Imposta il contatore su zero (0) e restituisce un'espressione di funzione.

In questo modo add diventa una funzione. La parte "meravigliosa" è che può accedere al contatore nell'ambito padre.

Questa è chiamata chiusura JavaScript . Consente a una funzione di avere variabili " private ".

Il contatore è protetto dall'ambito della funzione anonima e può essere modificato solo utilizzando la funzione di aggiunta.

Una chiusura è una funzione che ha accesso all'ambito padre, anche dopo la chiusura della funzione padre.