diff options
Diffstat (limited to 'files/it/web/javascript/guide/functions/index.html')
| -rw-r--r-- | files/it/web/javascript/guide/functions/index.html | 646 |
1 files changed, 646 insertions, 0 deletions
diff --git a/files/it/web/javascript/guide/functions/index.html b/files/it/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..4aca8d5a7b --- /dev/null +++ b/files/it/web/javascript/guide/functions/index.html @@ -0,0 +1,646 @@ +--- +title: Funzioni +slug: Web/JavaScript/Guida/Functions +translation_of: Web/JavaScript/Guide/Functions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> + +<div> </div> + +<p><strong>Le funzioni sono tra i blocchi di programmazione fondamentali in JavaScript. Una funzione è una procedura JavaScript — un gruppo di istruzioni ( statement ) che esegue un compito o calcola un valore. Per usare una funzione, occorre definirla, all'interno dello <em>scope</em> dal quale la si invocherà.</strong></p> + +<p>Vedi anche <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">l'esaustivo capitolo della guida di riferimento, che tratta delle funzioni </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript</a>, per avere maggiori dettagli.</p> + +<h2 id="Definire_una_funzione">Definire una funzione</h2> + +<h3 id="Dichiarazioni_di_funzione">Dichiarazioni di funzione</h3> + +<p>Una <strong>definizione di funzione</strong> ( o <strong>dichiarazione di funzione</strong>, o <strong>istruzione di funzione </strong>) consiste della parola chiave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a>, seguita da:</p> + +<ul> + <li>il nome della funzione.</li> + <li>una lista di argomenti per la funzione, chiusi tra due parentesi e separati da una virgola.</li> + <li>le istruzioni JavaScript che definiscono la funzione, chiuse tra due parentesi graffe, <code>{ }</code>.</li> +</ul> + +<p>Per esempio, il codice seguente definisce una funzione semplice chiamata <em>square</em>:</p> + +<pre class="brush: js">function square(number) { + return number * number; +} +</pre> + +<p>La funzione <em><code>square</code></em> riceve un argomento, chiamato <em><code>number</code></em>. La funzione contiene una sola istruzione che dice di restituire ( <em>return</em> ) l'argomento della funzione ( <em><code>number </code></em>) moltiplicato per se stesso. L'istruzione <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> specifica il valore restituito dalla funzione.</p> + +<pre class="brush: js">return number * number; +</pre> + +<p>I parametri primitivi ( quale un numero ) vengono passati alla funzione come <strong>valore</strong>; il valore è passato alla funzione, ma se la funzione cambia il valore del parametro, questo cambiamento non si riflette globalmente, o nella funzione chiamante ( la funzione che, eventualmente, ha invocato la funzione in esecuzione ).</p> + +<p>Se, invece, alla funzione viene passato un oggetto ( un valore non-primitivo, come, ad esempio, un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects."><code>Array</code></a> oppure un oggetto definito dall'utente ) come parametro e la funzione modifica le proprietà dell'oggetto, quella modifica sarà visibile anche fuori dalla funzione, come si può vedere dal seguente esempio:</p> + +<pre class="brush: js">function myFunc(theObject) { + theObject.make = "Toyota"; +} + +var mycar = {make: "Honda", model: "Accord", year: 1998}; +var x, y; + +x = mycar.make; // x gets the value "Honda" + +myFunc(mycar); +y = mycar.make; // y gets the value "Toyota" + // (the make property was changed by the function) +</pre> + +<h3 id="Espressioni_di_funzione">Espressioni di funzione</h3> + +<p>Mentre la dichiarazione di funzione di cui sopra è, da un punto di vista sintattico, un'istruzione, le funzioni possono anche essere create da un'espressione di funzione. Una funzione di questo tipo può anche essere <strong>anonima</strong>; vale a dire, non deve avere un nome. Per esempio, la funzione <em><code>square</code></em> potrebbe essere stata definita come:</p> + +<pre class="brush: js">var square = function(number) { return number * number }; +var x = square(4) // x gets the value 16</pre> + +<p>Tuttavia, è possibile assegnare un nome alla funzione anche con l'espressione di funzione e quel nome potrà essere utilizzato all'interno della funzione, per riferirsi alla funzione stessa, oppure in un debugger, per identificare la funzione all'interno dello stack:</p> + +<pre class="brush: js">var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) }; + +console.log(factorial(3)); +</pre> + +<p>NB: l'oggetto <em>console</em> non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:</p> + +<p> window.alert(factorial(3));</p> + +<p>Le espressioni di funzione sono utili quando si vuole passare una funzione ad un'altra funzione, come argomento. Il prossimo esempio mostra una funzione <code>map</code> che viene definita e poi invocata, con una funzione anonima come primo parametro:</p> + +<pre class="brush: js">function map(f,a) { + var result = [], // Create a new Array + i; + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +</pre> + +<p>Il seguente codice:</p> + +<pre class="brush: js">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); +</pre> + +<p>restituisce [0, 1, 8, 125, 1000].</p> + +<p>In JavaScript, una funzione può essere definita in base ad una condizione. Per esempio, la definizione di funzione seguente definisce la funzione <code>myFunc</code> solo se <code>num</code> è uguale a 0 ( zero ):</p> + +<pre class="brush: js">var myFunc; +if (num == 0){ + myFunc = function(theObject) { + theObject.make = "Toyota" + } +}</pre> + +<p>Per definire una funzione, inoltre, è possibile usare il costruttore <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a>, per creare funzioni da una stringa, in runtime, in modo simile a <a class="new" title="The documentation about this has not yet been written; please consider contributing!"><code>eval()</code></a>.</p> + +<p>Un <strong>metodo</strong> è una funzione che è una proprietà di un oggetto. Leggi di più sugli oggetti e sui metodi in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p> + +<h2 id="Chiamare_(_invocare_)_una_funzione">Chiamare ( invocare ) una funzione</h2> + +<p>Definire una funzione non significa eseguirla. Definire una funzione significa semplicemente darle un nome e specificare cosa fare quando la funzione viene chiamata ( invocata ). <strong>Chiamare</strong> una funzione significa eseguire le azioni specificate, utilizzando i parametri indicati. Per esempio, se definiamo la funzione <code>square</code>, possiamo chiamarla o invocarla nel modo seguente:</p> + +<pre class="brush: js">square(5); +</pre> + +<p>Questa istruzione chiama la funzione, inviandole un argomento, il numero 5. La funzione esegue le sue istruzioni e restituisce il valore 25.</p> + +<p>Le funzioni devono essere in <em>scope</em> quando vengono chiamate, ma la dichiarazione di funzione può anche apparire sotto la chiamata, nel codice sorgente, come nell'esempio seguente:</p> + +<pre class="brush: js">console.log(square(5)); +/* ... */ +function square(n) { return n*n } +</pre> + +<p>Lo <em>scope</em> di una funzione è la funzione nella quale è stata dichiarata, oppure l'intero programma se la dichiarazione è stata fatta al livello più alto, non annidata in alcun altro blocco di programmazione.</p> + +<div class="note"> +<p><strong>Nota:</strong> l'ultimo esempio funziona solo quando la funzione viene definita utilizzando la sintassi usata nell'esempio ( <code>function funcName(){}</code> ). Il codice seguente, invece, non funzionerà:</p> +</div> + +<pre class="brush: js example-bad">console.log(square(5)); +square = function (n) { + return n * n; +} +</pre> + +<p>Gli argomenti di una funzione non sono limitati alle stringhe testuali e ai numeri. È possibile passare anche interi oggetti ad una funzione. La funzione <code>show_props()</code> (definita in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) è un esempio di funzione che riceve, come argomento, un oggetto.</p> + +<p>Una funzione può chiamare se stessa. Per esempio, ecco una funzione che calcola in modo ricorsivo i fattoriali ( molto simile alla funzione <code>fac()</code> vista poco prima in questa stessa pagina ):</p> + +<pre class="brush: js">function factorial(n){ + if ((n == 0) || (n == 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p>A questo punto, è possibile calcolare i fattoriali dei cinque numeri seguenti:</p> + +<pre class="brush: js">var a, b, c, d, e; +a = factorial(1); // a gets the value 1 +b = factorial(2); // b gets the value 2 +c = factorial(3); // c gets the value 6 +d = factorial(4); // d gets the value 24 +e = factorial(5); // e gets the value 120 +</pre> + +<p>Esistono altri metodi per chiamare una funzione. Ci sono casi in cui una funzione deve essere chiamata dinamicamente, oppure casi in cui il numero degli argomenti passati alla funzione varia, oppure casi in cui il contesto della chiamata di funzione deve essere impostato ad uno specifico oggetto, determinato in runtime ( tempo di esecuzione ). È chiaro che le funzioni sono, esse stesse, oggetti, e che questi oggetti hanno propri metodi (vedi l'oggetto <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a>). Uno di questi metodi, <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The documentation about this has not yet been written; please consider contributing!"><code>apply()</code></a>, può essere usato a questo scopo.</p> + +<h2 class="deki-transform" id="Lo_scope_di_una_funzione">Lo scope di una funzione</h2> + +<p>Alle variabili definite all'interno di una funzione non è possibile accedere dall'esterno della funzione, poichè la variabile è definita solo per lo <em>scope</em> della funzione ( <em>scope</em>: portata, ambiente, ambito in cui il nome della variabile può essere utilizzato per riferirsi ad essa ). Tuttavia, una funzione può accedere a tutte le variabili e a tutte le funzioni definite all'interno dello <em>scope</em> in cui è stata definita. In altre parole, una funzione definita nello <em>scope</em> globale può accedere a tutte le variabili definite nello <em>scope</em> globale. Una funzione definita all'interno di un'altra funzione può accedere anche a tutte le variabili definite nella funzione genitrice ( parent ), oltre che a tutte le altre variabili alle quali può accedere la funzione genitrice.</p> + +<pre class="brush: js">// Queste variabili sono definite nello <em>scope</em> globale + +var num1 = 20, + num2 = 3, + name = "Chamahk"; + +// Questa funzione è definita nello <em>scope</em> globale + +function multiply() { + return num1 * num2; + } + +multiply(); // restituisce 60 + +// Un esempio di funzione annidata +function getScore () { + var num1 = 2, + num2 = 3; + + function add() { + return name + " scored " + (num1 + num2); + } + + return add(); +} + +getScore(); // restituisce "Chamahk scored 5" +</pre> + +<h2 id="Scope_e_lo_stack_della_funzione">Scope e lo stack della funzione</h2> + +<h3 id="Ricorsione">Ricorsione</h3> + +<p>Una funzione può chiamare se stessa. Esistono tre modi per una funzione di chiamare se stessa:</p> + +<ol> + <li>il nome della funzione</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> + <li>una variabile <em>in-scope</em> che fa da riferimento alla funzione</li> +</ol> + +<p>Per esempio, considerate la seguente definizione di funzione:</p> + +<pre class="brush: js">var foo = function bar() { + // statements go here +}; +</pre> + +<p>All'interno del corpo della funzione, le tre seguenti istruzioni sono equivalenti:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>Una funzione che chiama se stessa viene detta <em>funzione ricorsiva</em>. In qualche modo, la ricorsione è analoga ad un loop. Entrambi eseguono lo stesso codice più volte ed entrambi richiedono una condizione (per evitare un loop infinito, o piuttosto, una ricorsione infinita, in questo caso). Per esempio, il loop seguente:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" is the loop condition + // do stuff + x++; +} +</pre> + +<p>può essere convertito in una funzione ricorsiva e in una chiamata a quella funzione:</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0); +</pre> + +<p>Tuttavia, alcuni algoritmi non possono essere semplici loop iterativi. Per esempio, per avere tutti i nodi di una struttura ad albero (per esempio, il <a href="/en-US/docs/DOM">DOM</a>) è molto più semplice usare la ricorsione:</p> + +<pre class="brush: js">function walkTree(node) { + if (node == null) // + return; + // do something with node + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p>Paragonato alla funzione <code>loop</code>, ciascuna chiamata ricorsiva, qui, esegue, a sua volta, molte chiamate ricorsive.</p> + +<p>È possibile convertire qualsiasi algoritmo ricorsivo in un algoritmo non ricorsivo, ma spesso la logica è molto più complessa e per farlo è necessario utilizzare uno stack. In effetti, la ricorsione stessa usa uno stack: lo stack della funzione.</p> + +<p>Un comportamento paragonabile allo stack può essere visto nell'esempio seguente:</p> + +<pre class="brush: js">function foo(i) { + if (i < 0) + return; + console.log('begin:' + i); + foo(i - 1); + console.log('end:' + i); +} +foo(3); + +// Output: + +// begin:3 +// begin:2 +// begin:1 +// begin:0 +// end:0 +// end:1 +// end:2 +// end:3</pre> + +<h3 id="Funzioni_annidate_e_chiusure">Funzioni annidate e chiusure</h3> + +<p>È possibile annidare una funzione all'interno di una funzione. La funzione annidata ( interna ) è privata, rispetto alla funzione che la contiene (outer o esterna). Essa forma anche una <em>chiusura</em> ( <em>closure )</em>. Una chiusura è un'espressione (normalmente, una funzione) che può avere variabili libere ( non locali ) legate ad un ambiente (ambiente che "chiude" l'espressione).</p> + +<p>Dal momento in cui una funzione annidata è una chiusura, una funzione annidata può "ereditare" gli argomenti e le variabili della sua funzione contenitore (esterna o genitrice). In altre parole, la funzione interna contiene lo <em>scope</em> ( ambiente ) della funzione esterna.</p> + +<p>Per riepilogare:</p> + +<ul> + <li>alla funzione interna possono accedere solo le istruzioni contenute nella funzione esterna.</li> +</ul> + +<ul> + <li>la funzione interna forma una chiusura: la funzione interna può utilizzare gli argomenti e le variabili della funzione esterna, mentre la funzione esterna non può utilizzare gli argomenti e le variabili della funzione interna.</li> +</ul> + +<p>Ecco un esempio di funzione annidata:</p> + +<pre class="brush: js">function addSquares(a,b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} +a = addSquares(2,3); // restituisce 13 +b = addSquares(3,4); // restituisce 25 +c = addSquares(4,5); // restituisce 41 +</pre> + +<p>Dal momento in cui la funzione interna forma una chiusura, è possibile chiamare la funzione esterna e specificare gli argomenti per entrambe le funzioni, quella esterna e quella interna:</p> + +<pre class="brush: js">function outside(x) { + function inside(y) { + return x + y; + } + return inside; +} +fn_inside = outside(3); // Come dire: dammi una funzione che addizioni 3 a qualsiasi altro valore le venga passato +result = fn_inside(5); // restituisce 8 + +result1 = outside(3)(5); // restituisce 8 +</pre> + +<h3 id="Persistenza_delle_variabili">Persistenza delle variabili</h3> + +<p>Da notare come <code>x</code> venga preservata anche all'uscita da <code>inside</code>. Una chiusura deve preservare argomenti e variabili in tutti gli <em>scope</em> ai quali è riferita. Poichè ogni chiamata potrebbe trasportare argomenti differenti, per ogni chiamata alla funzione <em>outside</em> viene creata una nuova chiusura. La memoria può essere liberata solo quando <code>inside</code> non è più accessibile.</p> + +<p>Una chiusura non è differente da un riferimento ad un oggetto, ma è meno ovvia di quest'ultimo, perchè non richiede di impostare direttamente il riferimento e perchè non è possibile ispezionare l'oggetto al quale il riferimento punta.</p> + +<h3 id="Funzioni_annidate_multiple">Funzioni annidate multiple</h3> + +<p>Le funzioni possono essere annidate a più livelli. Per esempio, una funzione (A), può contenere una funzione (B), che può contenere, a sua volta, una funzione (C). Entrambe le funzioni B e C formano una chiusura, qui, così B può accedere ad A e C può accedere a B. Inoltre, visto che C può accedere a B che può accedere ad A, C può anche accedere ad A. Quindi, le chiusure possono contenere più <em>scope</em>; ciascuna chiusura contiene lo <em>scope</em> delle funzioni che la contengono. Questo meccanismo è chiamato <em>scope chaining</em> ( catena di <em>scope</em> ). (Perchè è chiamata "catena" sarà chiaro tra poco.)</p> + +<p>Considerate l'esempio seguente:</p> + +<pre class="brush: js">function A(x) { + function B(y) { + function C(z) { + console.log(x + y + z); + } + C(3); + } + B(2); +} +A(1); // logs 6 (1 + 2 + 3) +</pre> + +<p>In questo esempio, <code>C</code> accede alla variabile <code><em>y</em> di B</code> e alla <em>x</em> di <code>A</code>. Questo accade perchè:</p> + +<ol> + <li><code>B</code> forma una chiusura che include <code>A</code>: quindi, <code>B</code> può accedere agli argomenti ed alle variabili di <code>A</code>.</li> + <li><code>C</code> forma una chiusura che include <code>B</code>.</li> + <li>Poichè la chiusura di <code>B </code>include <code>A</code>, la chiusura di <code>C</code> include <code>A</code>; <code>C</code> può accedere agli argomenti ed alle variabili sia di <code>B</code> <em>che</em> di <code>A</code>. In altre parole, <code>C</code> unisce in una catena gli <em>scope</em> di <code>B</code> ed <code>A</code> in quell'ordine.</li> +</ol> + +<p>Il contrario, tuttavia, non è vero. <code>A</code> non può accedere a <code>C</code>, perchè <code>A</code> non può accedere ad alcun argomento o variabile di <code>B</code>, di cui <code>C</code> è una variabile. Quindi, <code>C</code> resta privata solo a <code>B</code>.</p> + +<h3 id="Conflitti_tra_nomi">Conflitti tra nomi</h3> + +<p>Quando due argomenti o variabili, all'interno degli <em>scope</em> di una chiusura hanno lo stesso nome, nasce un <em>conflitto tra nomi</em>. Gli <em>scope</em> più interni hanno la precedenza, così lo <em>scope</em> più annidato ha la precedenza più elevata, mentre lo <em>scope</em> più esterno ha la precedenza più bassa. Questa è la catena degli <em>scope</em>. Il primo della catena è lo <em>scope</em> più annidato, mentre l'ultimo è lo <em>scope</em> più esterno. Vediamo il seguente esempio:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">outside</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span> + <span class="keyword token">function</span> <span class="function token">inside</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> x<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> inside<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +result <span class="operator token">=</span> <span class="function token">outside</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// returns 20 instead of 10</span></code></pre> + +<p>Il conflitto tra nomi avviene con l'istruzione <code>return x</code> ed è tra il nome del parametro <code>x di inside</code> ed il nome della variabile x di <code>outside</code>. La catena di <em>scope</em> qui è {<code>inside</code>, <code>outside</code>, global object}. Quindi, la x di <code>inside ha la precedenza sulla x di</code> <code>outside</code>: il valore restituito, alla fine, sarà 20 ( la x di <code>inside </code>) e non 10 ( la x di <code>outside </code>).</p> + +<h2 id="Closure">Closure</h2> + +<p>Le closure sono uno dei meccanismi più potenti di JavaScript. JavaScript permette l'annidamento di funzioni e riconosce alla funzione interna il pieno accesso a tutte le variabili e a tutte le funzioni definite nella funzione esterna ( e a tutte le altre variabili e funzioni cui la funzione esterna ha accesso ). Tuttavia, la funzione esterna non ha accesso alle variabili ed alle funzioni definite nella funzione interna. Questo offre una certa protezione alle variabili della funzione interna. Inoltre, dal momento in cui la funzione interna ha accesso allo <em>scope</em> della funzione esterna, le variabili e le funzioni definite nella funzione esterna sopravviveranno alla funzione esterna stessa, se la funzione interna fa in modo di sopravvivere alla funzione esterna. Una closure viene creata quando la funzione interna viene resa disponibile in qualche modo agli <em>scope</em> esterni alla funzione esterna.</p> + +<pre class="brush: js">var pet = function(name) { // La funzione esterna definisce una variabile di nome "name" + var getName = function() { + return name; // La funzione interna ha accesso alla variabile "name" della funzione esterna + } + return getName; // restituisce la funzione interna, esponendola, quindi, a <em>scope</em> esterni +}, +myPet = pet("Vivie"); + +myPet(); // restituisce "Vivie" +</pre> + +<p>Può essere molto più complicato del codice scritto sopra. Può essere restituito un oggetto contenente metodi per manipolare le variabili interne della funzione esterna.</p> + +<pre class="brush: js">var createPet = function(name) { + var sex; + + return { + setName: function(newName) { + name = newName; + }, + + getName: function() { + return name; + }, + + getSex: function() { + return sex; + }, + + setSex: function(newSex) { + if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) { + sex = newSex; + } + } + } +} + +var pet = createPet("Vivie"); +pet.getName(); // Vivie + +pet.setName("Oliver"); +pet.setSex("male"); +pet.getSex(); // male +pet.getName(); // Oliver +</pre> + +<p>Nel codice sopra, la variabile <code>name</code> della funzione esterna è accessibile alle funzioni interne e non c'è modo di accedere alle variabili interne, se non attraverso le funzioni interne. Le variabili interne della funzione interna agiscono come magazzino sicuro per le funzioni interne. Esse conservano i dati "persistenti" e sicuri che le funzioni interne utilizzano. Le funzioni non hanno nemmeno bisogno di vedersi assegnare ad una variabile o di avere un nome.</p> + +<pre class="brush: js">var getCode = (function(){ + var secureCode = "0]Eal(eh&2"; // A code we do not want outsiders to be able to modify... + + return function () { + return secureCode; + }; +})(); + +getCode(); // Returns the secureCode +</pre> + +<p>Ci sono, tuttavia, alcuni pericoli dai quali guardarsi, quando si utilizzano le closure. Se una funzione chiusa definisce una variabile che ha lo stesso nome di una variabile definita nello <em>scope</em> esterno, non sarà più possibile riferirsi alla variabile esterna.</p> + +<pre class="brush: js">var createPet = function(name) { // Outer function defines a variable called "name" + return { + setName: function(name) { // Enclosed function also defines a variable called "name" + name = name; // ??? How do we access the "name" defined by the outer function ??? + } + } +} +</pre> + +<p>È davvero complicato usare la variabile magica <code>this</code> nelle closure. La variabile <code>this</code> è da usarsi con cautela, poichè ciò a cui <code>this</code> si riferisce dipende esclusivamente da dove è stata invocata la funzione, piuttosto che da dove è stata definita.</p> + +<h2 id="Usare_l'oggetto_arguments">Usare l'oggetto arguments</h2> + +<p>Gli argomenti di una funzione vengono memorizzati in un oggetto, strutturato come un array. All'interno di una funzione, è possibile riferirsi agli argomenti passati alla funzione stessa nel modo seguente:</p> + +<pre class="brush: js">arguments[i] +</pre> + +<p>dove <code>i</code> è il numero ordinale dell'argomento, a partire da zero. Così, il primo argomento passato ad una funzione sarà <code>arguments[0]</code>. Il numero totale degli argomenti è dato da <code>arguments.length</code>.</p> + +<p>Usando l'oggetto <code>arguments</code>, è possibile chiamare una funzione con più argomenti di quanti ne possa formalmente accettare. Questo è spesso utile se non si sa in anticipo quanti argomenti verranno passati alla funzione. Si può usare l'attributo <code>arguments.length</code> per determinare il numero degli argomenti realmente passati alla funzione, per poi accedere a ciascuno di essi usando l'oggetto <code>arguments</code>.</p> + +<p>Prendiamo, per esempio, una funzione che unisca più stringhe. Il solo argomento formale previsto per la funzione è una stringa che specifica i caratteri da usare per separare le singole voci. La funzione viene definita così:</p> + +<pre class="brush: js">function myConcat(separator) { + var result = "", // initialize list + i; + // iterate through arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p>È possibile passare una quantità qualsiasi di argomenti alla funzione e la funzione comporrà una stringa testuale contenente tutti gli argomenti passati:</p> + +<pre class="brush: js">// returns "red, orange, blue, " +myConcat(", ", "red", "orange", "blue"); + +// returns "elephant; giraffe; lion; cheetah; " +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// returns "sage. basil. oregano. pepper. parsley. " +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); +</pre> + +<div class="note"> +<p><strong>Nota:</strong> La variabile <code>arguments</code> è simile ad un array ( "array-like" ), ma non è un array. È simile ad un array poichè ha un indice numerato ed una proprietà <code>length</code>. Tuttavia, non possiede tutti i metodi di manipolazione degli array.</p> +</div> + +<p>Vedi l'oggetto <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a> nella JavaScript reference, per avere maggiori informazioni.</p> + +<h2 id="I_parametri_di_una_funzione">I parametri di una funzione</h2> + +<p>A partire da ECMAScript 6, esistono due nuovi tipi di parametri: i parametri di <em>default</em> e i parametri <em>rest</em>.</p> + +<h3 id="I_parametri_di_default">I parametri di default</h3> + +<p>In JavaScript, i parametri di una funzione hanno come valore di default <code>undefined</code>. Tuttavia, in alcune situazioni potrebbe essere utile impostare un diverso valore di default. In questo, possono aiutare i parametri di default.</p> + +<p>In passato, la strategia comune per impostare i valori di default era quella di verificare i valori dei parametri, all'interno del corpo della funzione, ed assegnare loro un valore, nel caso fossero stati <code>undefined</code>. Se nell'esempio seguente non venisse passato, durante la chiamata, alcun valore per <code>b</code>, il suo valore sarebbe <code>undefined</code>, anche quando venisse valutata l'istruzione <code>a*b</code>, e la chiamata a <code>multiply</code> restituirebbe <code>NaN ( Not a Number )</code>. Tuttavia, questo valore viene definito nella seconda riga:</p> + +<pre class="brush: js">function multiply(a, b) { + b = typeof b !== 'undefined' ? b : 1; + + return a*b; +} + +multiply(5); // 5 +</pre> + +<p>Con i parametri di deafult, la verifica all'interno del corpo della funzione non è più necessaria. Ora, è possibile mettere <code>1</code> come valore di default per <code>b</code> nella dichiarazione della funzione:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a*b; +} + +multiply(5); // 5</pre> + +<p>Per maggiori dettagli, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">paremetri di default</a> nella Javascript reference.</p> + +<h3 id="I_parametri_Rest">I parametri Rest</h3> + +<p>La sintassi dei <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> permette di rappresentare un indefinito numero di argomenti come un array. Nell'esempio, usiamo i parametri <em>rest</em> per rappresentare l'insieme degli argomenti composto dagli argomenti successivi al primo ( a partire dal secondo argomento fino alla fine ). Poi, moltiplichiamo ciascun argomento dell'insieme per il primo. Questo esempio utilizza una funzione a freccia, che verrà introdotta nella prossima sezione.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(x => multiplier * x); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<h2 id="Le_funzioni_a_freccia">Le funzioni a freccia</h2> + +<p>Una <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">espressione di funzione a freccia</a> ( nota anche come <strong>fat arrow function </strong>) ha una sintassi più stringata rispetto alle espressioni di funzione e forza, lessicalmente, il valore di <code>this</code>. Le funzioni a freccia sono sempre anonime. Vedi anche il post di hacks.mozilla.org: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p> + +<p>Sono due i fattori che influenzarono l'introduzione delle funzioni a freccia: la brevità delle funzioni ed il <code>this</code> lessicale.</p> + +<h3 id="Funzioni_più_brevi">Funzioni più brevi</h3> + +<p>In alcuni modelli funzionali, funzioni più brevi sono le benvenute. Paragoniamo le due istruzioni seguenti:</p> + +<pre class="brush: js">var a = [ + "Hydrogen", + "Helium", + "Lithium", + "Beryllium" +]; + +var a2 = a.map(function(s){ return s.length }); +var a3 = a.map( s => s.length );</pre> + +<h3 id="Il_this_lessicale">Il <code>this lessicale</code></h3> + +<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p> + +<pre class="brush: js">function Person() { + // The Person() constructor defines `<code>this`</code> as itself. + this.age = 0; + + setInterval(function growUp() { + // In nonstrict mode, the growUp() function defines `this` + // as the global object, which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> + +<pre class="brush: js">function Person() { + var self = this; // Some choose `that` instead of `self`. + // Choose one and be consistent. + self.age = 0; + + setInterval(function growUp() { + // The callback refers to the `self` variable of which + // the value is the expected object. + self.age++; + }, 1000); +}</pre> + +<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p> + +<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p> + +<pre class="brush: js">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the person object + }, 1000); +} + +var p = new Person();</pre> + +<h2 id="Predefined_functions">Predefined functions</h2> + +<p>JavaScript has several top-level, built-in functions:</p> + +<dl> + <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt> + <dd> + <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p> + </dd> + <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt> + <dd> + <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p> + </dd> + <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt> + <dd> + <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p> + </dd> + <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt> + <dd> + <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt> + <dd> + <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt> + <dd> + <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt> + <dd> + <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt> + <dd> + <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p> + </dd> + <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p> + </dd> +</dl> + +<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p> |