Parola chiave this JavaScript

Esempio

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Prova personalmente

Cos'è this?

JavaScript this la parola chiave si riferisce all'oggetto di appartenenza.

ha valori diversi a seconda della sua posizione di utilizzo:

  • Nel metodo:this si riferisce all'oggetto proprietario.
  • Nel caso singolo:this si riferisce all'oggetto globale.
  • Nella funzione:this si riferisce all'oggetto globale.
  • Nella funzione, in modalità strict:this è undefined.
  • Nell'evento:this si riferisce all'elemento che riceve l'evento.

come call() e apply() Tali metodi possono referenziare this a qualsiasi oggetto.

this nel metodo

Nei metodi di oggetto:this si riferisce al "proprietario" di questo metodo.

Nell'esempio in alto su questa pagina:this si riferisce all'oggetto person.

l'oggetto person è il proprietario del metodo fullName.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Prova personalmente

this singolo

Quando utilizzato singolarmente, il proprietario è l'oggetto globale, quindi: this si riferisce all'oggetto globale.

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

Esempio

var x = this;

Prova personalmente

In modalità strict, se utilizzato singolarmente: this si riferisce all'oggetto globale [oggetto Window]:

Esempio

"use strict";
var x = this;

Prova personalmente

this nella funzione (predefinito)

Il binding predefinito del proprietario della funzione nel JavaScript funzionale: this.

quindi, nella funzione:this si riferisce all'oggetto globale [oggetto Window].

Esempio

function myFunction() {
  return this;
}

Prova personalmente

this nella funzione (modo strict)

Il modo strict JavaScript non permette il binding predefinito.

quindi, quando si utilizza in una funzione, in modalità strict:this è non definito (undefined})

Esempio

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

Prova personalmente

this nell'handler degli eventi

Nella gestione degli eventi HTML:this Si riferisce all'elemento HTML che riceve questo evento:

Esempio

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

Prova personalmente

Metodi di oggetto

In questo esempio:this è l'oggetto person (l'oggetto person è il "proprietario" di questa funzione):

Esempio

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

Prova personalmente

Esempio

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Prova personalmente

In altre parole,this.firstName Significa thisdell'oggetto firstName Proprietà.

Funzione di binding esplicita

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

Entrambi possono essere utilizzati per chiamare un metodo dell'oggetto con un altro oggetto come parametro.

Puoi leggere ulteriori informazioni alla fine di questo tutorial. call() e apply() Altre informazioni.

Quando si chiama person1.fullName utilizzando person2 come parametro,this Riferirà a person2, anche se è un metodo di person1:

Esempio

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // Restituirà "Bill Gates"

Prova personalmente