path: root/files/it/web/javascript/reference/operators/this/index.html

---
title: this
slug: Web/JavaScript/Reference/Operators/this
translation_of: Web/JavaScript/Reference/Operators/this
---
<div>{{jsSidebar("Operators")}}</div>

<p>La <strong>keyword</strong> <strong>di</strong> <strong>funzione <code>this</code> </strong>si comporta in modo leggermente differente in JavaScript rispetto ad altri linguaggi. Esistono inoltre alcune differenze tra <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> e non-strict mode.</p>

<p>Nella maggior parte dei casi, il valore di <code>this</code> è determinato da come la funzione viene invocata (chiamata). Il valore di <code>this</code> non può essere impostato per assegnamento durante l'esecuzione, e potrebbe essere differente ogni volta in cui la funzione viene chiamata. ES5 ha introdotto il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> per <a href="#The_bind_method">impostare il valore di <code>this</code> indipendentemente da come la funzione è invocata</a>. ECMAScript 2015 ha introdotto <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions/Arrow_functions">le funzione a freccia ( arrow function )</a>, in cui la keyword <code>this </code>viene lessicalmente incorporata nello <em>scope</em> corrente ( <code>lo scope </code>del contesto di esecuzione relativo al blocco corrente<code> ). </code></p>

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox">this</pre>

<h2 id="Contesto_Globale">Contesto Globale</h2>

<p>Nel contesto di esecuzione globale (fuori da qualsiasi funzione), <code>this</code> si riferisce all'oggetto globale, sia che ci si trovi in strict mode,  sia che ci si trovi in non-strict mode.</p>

<pre class="brush:js">console.log(this.document === document); // true

// In web browsers, the window object is also the global object:
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37
</pre>

<h2 id="Contesto_di_funzione">Contesto di funzione</h2>

<p>All'interno di una funzione, il valore di <code>this</code> dipende da come la funzione è invocata.</p>

<h3 id="Chiamata_semplice">Chiamata semplice</h3>

<pre class="brush:js">function f1(){
  return this;
}

f1() === window; // global object
</pre>

<p>In questo caso, il valore di <code>this</code> non viene impostato dalla chiamata. Visto che il codice non è in strict mode, il valore di <code>this</code> deve sempre essere un oggetto quindi viene impostato di default sull'oggetto globale.</p>

<pre class="brush:js">function f2(){
  "use strict"; // see strict mode
  return this;
}

f2() === undefined;
</pre>

<p>In strict mode, il valore di <code>this</code> rimane impostato sul valore definito al momento dell'ingresso nel contesto di esecuzione. Se non è definito, resta undefined. Può anche essere impostato a qualsiasi valore, come <code>null</code> o <code>42</code> o <code>"I am not this"</code>.</p>

<div class="note"><strong>Nota:</strong> Nel secondo esempio, <code>this</code> dovrebbe essere <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, perchè <code>f2</code> viene invocata senza specificare alcuna base (per esempio, <code>window.f2()</code>). Alcuni browser non hanno implementato questo orientamento, quando hanno deciso di supportare lo <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>. Come risultato, questi browser restituivano, in modo non corretto, l'oggetto <code>window</code>.</div>

<h3 id="Funzioni_Arrow">Funzioni Arrow</h3>

<p>Nelle <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funzioni arrow</a>, <code>this</code> è assegnato lessicalmente, assume cioè il valore del contesto di esecuzione che contiene <code>this.</code> In codice globale punta all'oggetto globale:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> globalObject <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre>

<p>Non importa come <code>foo</code> sia invocato, <code>this</code> punterà all'oggetto globale. Questo è ancora valido se è chiamato come metodo di un oggetto (che solitamente punterebbe il valore di <code>this</code> sullo stesso) tramite chiamate dei metodi <code>call</code> o <code>apply</code> o <code>bind</code></p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Call as a method of an object</span>
<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>foo<span class="punctuation token">:</span> foo<span class="punctuation token">}</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>obj<span class="punctuation token">.</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span>

<span class="comment token">// Attempt to set this using call</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span>

<span class="comment token">// Attempt to set this using bind</span>
foo <span class="operator token">=</span> foo<span class="punctuation token">.</span><span class="function token">bind</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre>

<p>in ogni caso il valore di this all'interno di foo è impostato al valore di quando è stato creato (nell'esempio di sopra, l'oggetto globale). Lo stesso si applica per funzioni arrow create all'interno di altre funzioni: il loro valore di this è impostato a quello del contesto di esecuzione esterno.</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Create obj with a method bar that returns a function that</span>
<span class="comment token">// returns its this. The returned function is created as </span>
<span class="comment token">// an arrow function, so its this is permanently bound to the</span>
<span class="comment token">// this of its enclosing function. The value of bar can be set</span>
<span class="comment token">// in the call, which in turn sets the value of the </span>
<span class="comment token">// returned function.</span>
<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> bar <span class="punctuation token">:</span> <span class="keyword token">function</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="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="keyword token">this</span><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="punctuation token">}</span><span class="punctuation token">;</span>

<span class="comment token">// Call bar as a method of obj, setting its this to obj</span>
<span class="comment token">// Assign a reference to the returned function to fn</span>
<span class="keyword token">var</span> fn <span class="operator token">=</span> obj<span class="punctuation token">.</span><span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// Call fn without setting this, would normally default</span>
<span class="comment token">// to the global object or undefined in strict mode</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">fn</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> obj<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre>

<p>Nel codice sopra, la funzione (chiamiamola funzione anonima A) assegnata a obj.bar restituisce un altra funzione (chiamiamola funzione anonima B) che viene creata come funzione arrow. Il risultato, è che this della funzione B è impostata permanentemente al valore di this di obj.bar (funzione A) quando viene chiamata. quando la funzione restituita (B) viene chiamata, il relativo this sarà sempre impostato al valore di partenza. Nel codice di esempio  il this della funzione B è impostato al valore this della funzione A che è obj, pertanto resta impostato ad obj anche quando viene chiamato in un modo che imposterebbe this come undefined od oggetto globale (o qualunque altro metodo, come nel precedente esempio, nel contesto di esecuzione globale).</p>

<p>In the above, the function(call it anonymous function A) assigned to <code>obj.bar</code> returns another function(call it anonymous function B) that is created as an arrow function. As a result, function B's  <code>this</code> is permanently set to the <code>this</code> of <code>obj.bar</code> (function A)when called. When the returned function(function B) is called, its <code>this</code> will always be what it was set to initially. In the above code example, function B's <code>this</code> is set to function A's <code>this</code> which is obj, so it remains set to <code>obj</code> even when called in a manner that would normally set its <code>this</code> to <code>undefined</code> or the global object (or any other method as in the previous example in the global execution context).</p>

<h3 id="Come_metodo_di_un_oggetto">Come metodo di un oggetto</h3>

<p>Quando una funzione viene invocata come metodo di un oggetto, il <code>this</code>, all'interno della funzione, viene impostato sull'oggetto di cui la funzione è metodo.</p>

<p>Nell'esempio seguente, quando <code>o.f()</code> viene invocata, all'interno della funzione <code>this</code> è associato all'oggetto <code>o</code>.</p>

<pre class="brush:js">var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37
</pre>

<p>Da notare che questo comportamento non è per nulla influenzato dal come e dal dove la funzione sia stata definita. Nell'esempio precedente, abbiamo definito la funzione inline, come membro <code>f</code>, nel corso della definizione di <code>o</code>. Tuttavia, avremmo potuto facilmente definire la funzione prima, per poi associarla a <code>o.f</code>. Il risultato sarebbe stato lo stesso:</p>

<pre class="brush:js">var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37
</pre>

<p>Questo dimostra che la cosa più importante è che la funzione venga invocata dal membro<code> f</code> di <code>o</code>.</p>

<p>In modo analogo, l'associazione di <code>this</code> è influenzata solo dal membro più vicino. Nell'esempio seguente, quando invochiamo la funzione, la invochiamo come metodo <code>g</code> dell'oggetto <code>o.b</code>. Questa volta, durante l'esecuzione, <code>this</code>, all'interno della funzione, sarà associata ad <code>o.b</code>. Il fatto che l'oggetto sia, esso stesso, un membro di <code>o</code> non ha alcuna conseguenza; la sola cosa che conti è il riferimento più immediato.</p>

<pre class="brush:js">o.b = {g: independent, prop: 42};
console.log(o.b.g()); // logs 42
</pre>

<h4 id="this_nella_prototype_chain_dell'oggetto"><code>this</code> nella prototype chain dell'oggetto</h4>

<p>La stessa notazione è valida per i metodi definiti altrove nella prototype chain dell'oggetto. Se il metodo è sulla prototype chain di un oggetto, <code>this</code> si riferisce all'oggetto su cui il metodo è stato chiamato, come se il metodo appartenesse all'oggetto.</p>

<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5
</pre>

<p>in questo esempio, l'oggetto assegnato alla variabile <code>p</code> non ha definita una proprietà <code>f</code>, la eredita dal suo prototipo. Non ha importanza che il controllo per <code>f</code> trovi eventualmente un membro con quel nome in <code>o</code>; il controllo è cominciato con un riferimento a <code>p.f</code>, quindi this all'interno della funzione assume il valore dell'oggetto a cui <code>p</code> si riferisce. Cioè, dal momento che <code>f</code> è chiamata come metodo di <code>p</code>, la parola chiave <code>this</code> al suo interno si riferisce a <code>p</code>. Questa è una interessante caratteristica dell'ereditarietà dei prototipi di javascript.</p>

<h4 id="this_all'interno_di_metodi_getter_o_setter"><code>this</code> all'interno di metodi getter o setter</h4>

<p>Ancora, la stessa notazione è valida quando una funzione è invocata all'interno di metodi get o set. In una funzione usata come getter o setter <code>this</code> viene collegata all'oggetto dal quale la proprietà è settata o ricavata.</p>

<pre class="brush:js">function modulus(){
  return Math.sqrt(this.re * this.re + this.im * this.im);
}

var o = {
  re: 1,
  im: -1,
  get phase(){
    return Math.atan2(this.im, this.re);
  }
};

Object.defineProperty(o, 'modulus', {
    get: modulus, enumerable:true, configurable:true});

console.log(o.phase, o.modulus); // logs -0.78 1.4142
</pre>

<h3 id="Come_costruttore">Come costruttore</h3>

<p>Quando una funzione è usata come un costruttore (tramite la parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>), <code>this</code> è collegata al nuovo oggetto che viene costruito.</p>

<p>Nota: mentre di default un costruttore restituisce l'oggetto riferenziato da <code>this</code>, può invece restituire qualche altro oggetto (se il valore di ritorno non è un oggetto, allora viene restituito l'oggetto <code>this</code>).</p>

<pre class="brush:js">/*
 * Constructors work like this:
 *
 * function MyConstructor(){
 *   // Actual function body code goes here.
 *   // Create properties on |this| as
 *   // desired by assigning to them.  E.g.,
 *   this.fum = "nom";
 *   // et cetera...
 *
 *   // If the function has a return statement that
 *   // returns an object, that object will be the
 *   // result of the |new| expression.  Otherwise,
 *   // the result of the expression is the object
 *   // currently bound to |this|
 *   // (i.e., the common case most usually seen).
 * }
 */

function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
console.log(o.a); // logs 38
</pre>

<p>Nell'ultimo esempio <code>(C2)</code>, dal momento che è stato restituito un oggetto durante la costruzione, il nuovo oggetto a cui <code>this</code> era collegato viene semplicemente scartato. (Questo rende essenzialmente l'assegnazione "<code>this.a = 37;</code>" codice inutile. Non lo è in senso stretto, in quanto viene eseguito, ma può essere eliminato senza conseguenze).</p>

<h3 id="I_metodi_call_e_apply">I metodi <code>call</code> e <code>apply</code></h3>

<p>Dove una funzione usa la parola chiave <code>this</code>, il suo valore può essere collegato ad un qualsivoglia oggetto nella chiamata usando i metodi <code><a href="/it/docs/">call</a></code> o <code><a href="/it/docs/">apply</a></code><a href="/it/docs/"> </a>che tutte le funzioni ereditano da <code>Function.prototype</code>.<a href="/it/docs/"> </a></p>

<pre class="brush:js">function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

// The first parameter is the object to use as
// 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// The first parameter is the object to use as
// 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
</pre>

<p>Notare che con <code>call</code> e <code>apply</code>, se il valore passato tramite <code>this</code> non è un oggetto, viene eseguito un tentativo di convertire tale valore in oggetto usando l'operazione interna <code>ToObject</code>. pertanto, se il valore passato è un primitivo come 7 o 'foo', questo verrà convertito ad <code>Object</code> usando il relativo costruttore, quindi il valore primitivo <code>7</code> viene convertito  come <code>new</code> <code>Number(7)</code> e la stringa <code>'foo'</code> viene convertita come <code>new String('foo')</code>, per esempio:</p>

<pre class="brush:js">function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]
</pre>

<h3 id="Il_metodo_bind">Il metodo <code>bind</code></h3>

<p>ECMAScript 5 ha introdotto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Chiamare <code>f.bind(someObject)</code> crea una nuova funzione con lo stesso corpo e visibità di <code>f,</code> ma nella funzione originale si trova la parola chiave <code>this</code>, nella nuova funzione viene permanentemente collegato al primo argomento passato alla chiamata del metodo <code>bind</code>, ignorando come la funzione stessa venga usata. </p>

<pre class="brush:js">function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty
</pre>

<h3 id="Come_handler_degli_eventi_del_DOM">Come handler degli eventi del DOM</h3>

<p>Quando una funzione viene usata come handler di eventi, i suoi riferimenti <code>this</code> sono puntati all'elemento che ha originato l'evento (alcuni Browser non seguono queste convenzioni per i listeners agguinti dinamicamente tramite metodi diversi da <code>addEventListener</code>).</p>

<pre class="brush:js">// When called as a listener, turns the related element blue
function bluify(e){
  // Always true
  console.log(this === e.currentTarget);
  // true when currentTarget and target are the same object
  console.log(this === e.target);
  this.style.backgroundColor = '#A5D9F3';
}

// Get a list of every element in the document
var elements = document.getElementsByTagName('*');

// Add bluify as a click listener so when the
// element is clicked on, it turns blue
for(var i=0 ; i&lt;elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}</pre>

<h3 id="In_un_handler_di_eventi_in-line">In un handler di eventi "in-line"</h3>

<p>quando il codice è chiamato da un handler in-line, <code>this</code> punta all'elemento DOM sul quale il listener è posizionato:</p>

<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p>

<pre class="brush:js">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
  Show this
&lt;/button&gt;
</pre>

<p>Sopra, <code>alert</code> mostra '<code>button</code>'. Notare comunque che this assume tale valore solo al di fuori di una funzione:</p>

<p> </p>

<pre class="brush:js">&lt;button onclick="alert((function(){return this}()));"&gt;
  Show inner this
&lt;/button&gt;
</pre>

<p> </p>

<p>in questo caso, nella funzione interna, <code>this</code> non punta all'elemento DOM quindi restituisce l'oggetto globale/window (cioè l'oggetto di default in modalità non-strict, in cui <code>this</code> non viene impostato dalla chiamata)</p>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.0.</td>
  </tr>
 </tbody>
</table>

<p> </p>

<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>

<h2 id="Vedere_Anche">Vedere Anche</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li>
 <li><a href="http://bjorn.tipling.com/all-this">All this</a>, un articolo su <code>this</code> in diversi contesti (Inglese)</li>
 <li><a href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/">Semplice spiegazione della parola chiave 'this' in JavaScript (inglese)</a></li>
</ul>