Parola chiave this JavaScript

Confrontati con altri linguaggi, il comportamento del simbolo this nel JavaScript è leggermente diverso.

Nel JavaScript, il simbolo this si riferisce all'oggetto di appartenenza.

Secondo la posizione di utilizzo, assume valori diversi:

• Nel contesto di un metodo, this si riferisceoggetto proprietario

• Singolarmente, this si riferisce aoggetto globale

• Nel contesto di una funzione, this si riferisceoggetto globale

• Nel contesto di una funzione, in modalità strict, this èNon definito

• Nella gestione degli eventi, this si riferisce all'oggettoelemento

• Metodi come call() e apply(), possono essere riferiti aogni oggetto

Contesto del metodo

Nella metodo dell'oggetto, this si riferisce al contesto del metodouser.

Nell'esempio seguente, quando si chiamauser.getName()Quando, all'interno della funzione, this viene vincolato auserOggetto:

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age : 22,
getName : function() {
　return this.firstName + " " + this.lastName;
}
;
document.write(user.getName()); // "Vishal Choudhary"

quiuserL'oggetto è il proprietariogetNamemetodi.

Ambito globale

Nell'ambito di esecuzione globale (al di fuori di qualsiasi funzione), this si riferisce sempre all'oggetto globale, indipendentemente dal fatto che sia in modalità strict o meno.

// Nella Web browser, l'oggetto window è anche l'oggetto globale:
console.log(this === window); // true
a = 50;
console.log(window.a); // 50
this.b = "w3codebox";
console.log(window.b) // "w3codebox"
console.log(b) // "w3codebox"

Nella finestra del browser, l'oggetto globale è[object Window].

Ambito della funzione

All'interno della funzione, il valore di this dipende dal modo in cui la funzione viene chiamata.

Poiché il seguente codice non è in modalità strict, this di conseguenza è impostato sull'oggetto globale, ovvero nel browser[object Window]:

function myFunc() {
return this;
}

In modalità strict, tuttavia il valore di this èNon definito:

function myFunc() {
"use strict";
return this;
}

Di conseguenza, in modalità strict, se l'ambito di esecuzioneNon definitoSe, alloraStato non definito.

thisNel gestore di eventi DOM

Quando una funzione viene utilizzata come gestore di eventi, this viene impostato sull'elemento che ha scatenato l'evento:

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
;

Quando si chiama il codice da un gestore di eventi inline, this viene impostato sull'elemento in cui è stato aggiunto l'ascoltatore:

<button onclick="this.style.display='none'">Clicca per rimuovermi</button>

Ecco un altro esempio:

<button onclick="alert(this)">Clicca</button>

Funzione esplicita di binding

I metodi call() e apply() sono metodi JavaScript predefiniti.

Possono tutte essere utilizzate per chiamare metodi di oggetti con un altro oggetto come argomento.

function add(c, d) {
return this.a + this.b + c + d;
}
var obj = {a: 5, b: 10};
add.call(obj, 5, 7); // 27
add.apply(obj, [10, 20]); // 45

Funzioni arrow (=>)

Nelle funzioni arrow (=>), this si riferisce sempre al contesto léssico in cui è stato creato.

Nel codice globale, viene impostato sull'oggetto globale:

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj); // true