JavaScript Function bind()

Prestito di funzione (Function Borrowing)

Utilizzando il metodo bind(), un oggetto può prendere in prestito un metodo da un altro oggetto.

Nel seguente esempio sono stati creati 2 oggetti (person e member).

l'oggetto member ha preso in prestito il metodo fullname dell'oggetto person:

istanza

const person = {
  firstName: "Bill",
  lastName: "Gates",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
const member = {
  firstName: "Hege",
  lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);

Prova da solo

mantenere this

a volte è necessario utilizzare il metodo bind() per prevenire la perdita this.

Nel seguente esempio, l'oggetto person ha un metodo display. Nel metodo display,this si riferisce all'oggetto person:

istanza

const person = {
  firstName: "Bill",
  lastName: "Gates",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}
person.display();

Prova da solo

Quando una funzione viene utilizzata come callback:this sarà persa.

Questo esempio proverà a visualizzare il nome della persona dopo 3 secondi, ma visualizzerà undefined:

istanza

const person = {
  firstName: "Bill",
  lastName: "Gates",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}
setTimeout(person.display, 3000);

Prova da solo

Il metodo bind() risolve questo problema.

Nel seguente esempio, il metodo bind() viene utilizzato per associare person.display a person.

Questo esempio verrà visualizzato dopo 3 secondi il nome della persona:

istanza

const person = {
  firstName: "Bill",
  lastName: "Gates",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}
let display = person.display.bind(person);
setTimeout(display, 3000);

Prova da solo

Cos'è this?

In JavaScript,this Riferimento alla parola chiaveOggetto.

RiferitoQualeL'oggetto dipende dal modo in cui viene chiamato (usato o chiamato).

A seconda del modo di utilizzo, la parola chiave this Riferisce a oggetti diversi:

  • Nelle funzioni dell'oggetto,this Riferito aOggetto.
  • Utilizzato singolarmente,this RiferitoOggetto globale.
  • Nella funzione,this RiferitoOggetto globale.
  • Nella funzione, in modalità strict,this È undefined.
  • Nell'evento:this Riferiti all'elemento che riceve l'eventoElementi.
  • Metodi come call(), apply() e bind() possono this Riferito aOgni oggetto.

Attenzione:this Non è una variabile. È una parola chiave. Non puoi modificarla this .

Vedi anche:

Tutorial:this JavaScript