Il valore di questa parola chiave

La parola chiave this fa riferimento al valore dell'oggetto associato al funzione al momento della chiamata, vale a dire che il suo valore è diverso sul fatto che una funzione venga chiamata come metodo, come funzione autonoma o come costruttore.

Quando viene chiamata una funzione, crea un'istanza della parola chiave this dietro le scene come riferimento all'oggetto che contiene la funzione, assegnando alle proprietà e ai metodi definiti nel suo ambito. L'utilizzo di this è in qualche modo simile all'utilizzo di una variabile dichiarata con const. Come una costante, this non può essere rimosso e il suo valore non può essere riassegnato, ma i metodi e le proprietà dell'oggetto che la parola chiave this può essere modificato.

Associazione globale

Al di fuori di una funzione o del contesto di un oggetto, this si riferisce alla globalThis, che fa riferimento all'oggetto globale nella maggior parte degli ambienti JavaScript. Nel contesto di uno script eseguito su un browser web, l'oggetto globale è l'oggetto window:

this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}

In Node.js, globalThis è l'oggetto global:

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}

Al di fuori della modalità con restrizioni, this si riferisce anche all'oggetto globale all'interno di un oggetto autonomo funzione, perché il Window principale è l'oggetto che effettivamente "possiede" queste funzioni.

function myFunction() {
    console.log( this );
}
myFunction();
> Window {...}

(function() {
    console.log( this );
}());
> Window {...}

Quando utilizzi la modalità con restrizioni, il valore di this è undefined all'interno di una versione autonoma :

(function() {
    "use strict";
    console.log( this );
}());
> undefined

Prima dell'introduzione della modalità con restrizioni, un valore null o undefined per this viene sostituito da un riferimento all'oggetto globale. A volte potresti vedere associazione globale denominata "associazione predefinita" a causa di questo comportamento precedente.

Associazione implicita

Quando una funzione viene chiamata come metodo di un oggetto, un'istanza di this all'interno questo metodo fa riferimento all'oggetto che lo contiene, concedendo l'accesso e le relative proprietà:

let myObject = {
    myValue: "This is my string.",
    myMethod() {
            console.log( this.myValue );
    }
};

myObject.myMethod();
> "This is my string."

Potrebbe sembrare che il valore di this dipenda da come una funzione e dalle sue che contengono gli oggetti. Il contesto per il valore di this è invece il contesto di esecuzione attuale. In questo caso, il contesto di esecuzione è che L'oggetto myObject sta chiamando il metodo myMethod, quindi myObject è il valore per this. Questo potrebbe sembrare un aspetto tecnico nel contesto della precedente esempi, ma per utilizzi più avanzati di this, è una distinzione essenziale per più file.

In generale, usa this in modi che non prevedono che il codice circostante abbia a una particolare struttura. L'eccezione a questa regola è ES5. Funzioni delle frecce.

this nelle funzioni freccia

Nelle funzioni a freccia, this si risolve in un'associazione in un ambiente che include errori sessuali. Ciò significa che this in una funzione a freccia si riferisce al valore di this nella relativa il contesto più vicino:

let myObject = {
    myMethod() { console.log( this ); },
    myArrowFunction: () => console.log( this ),
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

myObject.myArrowFunction();
> Window {...}

Nell'esempio precedente, myObject.myMethod() registra myObject come oggetto che "possiede" questo metodo, ma myObject.myArrowFunction() restituisce globalThis (o undefined), perché l'istanza di this all'interno della funzione freccia si riferisce invece all'ambito che include

Nell'esempio seguente, myEnclosingMethod crea una funzione a freccia nella che lo contiene quando viene eseguita. L'istanza di this all'interno La funzione freccia ora si riferisce al valore di this all'interno del relativo , ovvero il metodo che contiene la funzione freccia. Poiché il valore di this all'interno di myEnclosingMethod si riferisce a myObject, dopo definisci la funzione freccia, this all'interno della funzione freccia si riferisce anche a myObject:

let myObject = {
    myMethod() { console.log( this ); },
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

Associazione esplicita

L'associazione implicita gestisce la maggior parte dei casi d'uso per l'uso di this. Tuttavia, a volte potrebbe essere necessario il valore di this per rappresentare un'esecuzione specifica contesto, anziché quello ipotizzato. Un testo illustrativo, se un po' obsoleto, esempio funziona con this all'interno della funzione di callback di un setTimeout, poiché questo callback ha un contesto di esecuzione univoco:

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};
myObject.myMethod();
> "This is my string."

setTimeout( myObject.myMethod, 100 );
> undefined

Anche se da allora questa specifica carenza di setTimeout è stata colmata altre funzionalità, problemi simili di "perdita" this già affrontati creando un riferimento esplicito al valore di this nell'ambito del contesto previsto. A volte potresti vedere istanze dell'assegnazione di this a una variabile utilizzando identificatori come that, self o _this nella versione precedente codebase. Queste sono convenzioni comuni per gli identificatori per variabili contenenti un È stato superato il valore this.

Quando chiami una funzione utilizzando i metodi call(), bind() o apply(), this fa riferimento esplicitamente all'oggetto chiamato:

let myFunction = function() {
    console.log( this.myValue );
}

let myObject = {
   "myValue" : "This is my string."
 };

myFunction.call( myObject );
> "This is my string."

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};

setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."

L'associazione esplicita sostituisce il valore this fornito dall'associazione implicita.

let myObject = {
    "myValue" : "This string sits alongside myMethod.",
    myMethod() {
        console.log( this.myValue );
    }
};
let myOtherObject = {
    "myValue" : "This is a string in another object entirely.",
};

myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."

Se una funzione viene chiamata in un modo che imposterebbe il valore di this su undefined o null, questo valore è sostituito da globalThis al di fuori del limite massimo modalità:

let myFunction = function() {
    console.log( this );
}

myFunction.call( null );
> Window {...}

Analogamente, se una funzione viene chiamata in un modo che darebbe a this una funzione , questo valore viene sostituito con oggetto wrapper del valore primitivo fuori dalla modalità con restrizioni:

let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> Number { 10 }

In modalità con restrizioni, un valore this passato non viene forzato in alcun modo a un oggetto, anche se si tratta di un valore primitivo, null o undefined:

"use strict";
let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

new associazione

Quando una class viene utilizzata come costruttore utilizzando Parola chiave new, this si riferisce all'istanza appena creata:

class MyClass {
    myString;
    constructor() {
        this.myString = "My string.";
    }
    logThis() {
        console.log( this );
    }
}
const thisClass = new MyClass();

thisClass.logThis();
> Object { myString: "My string." }

Analogamente, il valore di this all'interno di una funzione costruttore chiamata utilizzando new si riferisce all'oggetto che viene creato:

function MyFunction() {
  this.myString = "My string.";
  this.logThis = function() {
    console.log( this );
  }
}
const myObject = new MyFunction();

myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }

Associazione gestore eventi

Nel contesto dei gestori di eventi, il valore di this fa riferimento all'oggetto che lo richiama. All'interno della funzione di callback di un gestore di eventi, significa this fa riferimento all'elemento associato al gestore:

let button = document.querySelector( "button" );

button.addEventListener( "click", function( event ) { console.log( this ); } );

Quando un utente interagisce con button nello snippet precedente, il risultato è l'oggetto elemento contenente lo stesso <button>:

> Button {}

Quando viene utilizzata una funzione freccia come callback di un listener di eventi, il valore di this viene nuovamente fornito dal contesto di esecuzione più vicino. In alto significa che this all'interno di una funzione di callback di gestore di eventi è globalThis (o undefined, in modalità con restrizioni):

let button = document.querySelector( "button" );

button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined

Come per qualsiasi altro oggetto, quando usi call(), bind() o apply() per fare riferimento alla funzione di callback di un listener di eventi, this fa riferimento esplicitamente all'oggetto:

let button = document.querySelector( "button" );
let myObject = {
    "myValue" : true
};
function handleClick() {
    console.log( this );
}

button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }

Verifica le tue conoscenze