Questo, legame, chiama e applica in JavaScript | Spiegato

Legare, chiamare e applicare sono metodi davvero utili e speciali che ci aiutano a raggiungere il prestito di caratteristiche e metodi da un oggetto all'altro usando il riferimento "Questo". Questo è un argomento un po 'avanzato, ecco perché prenderemo le cose lentamente per te e spiegheremo ogni minuto dettaglio con esempi.

JavaScript e molti altri linguaggi di programmazione usano la parola chiave Questo Per passare il riferimento dell'oggetto/classe genitore alle sue funzioni e metodi al loro interno. Mentre, il bind, la chiamata e l'applicazione dei metodi funzionano sul passaggio del riferimento agli attributi di prestito da un oggetto a un altro. La funzione Bind, Call and Applic è stata aggiunta in JavaScript nella versione ECMA2015.

Il riferimento "questo"

La parola chiave Questo ha un significato molto specifico in JavaScript, si riferisce all'oggetto che chiama la funzione. Se stiamo lavorando con un metodo del costruttore, allora la parola chiave Questo farebbe riferimento alla classe e alle sue proprietà, se stiamo lavorando con alcuni elementi DOM Questo La parola chiave si riferirebbe ai valori globali del DOM.

Per dimostrarlo, crea il seguente oggetto usando le seguenti righe:

var persona =
Nome: "John Doe",
Età: 25,
Designazione: "revisore",
printName: function ()
console.registro (questo.nome);
,
;

Come puoi vedere, all'interno della persona dell'oggetto abbiamo una funzione printName che stamperà il nome della persona e all'interno del console.tronco d'albero() Possiamo vedere che abbiamo la linea:

Questo.nome;

Questo La parola chiave sta creando un riferimento all'oggetto e dice al compilatore di recuperare il "nome" da questo particolare oggetto.

Chiama e applica metodi

Chiamata E fare domanda a Entrambi possono essere definiti contemporaneamente perché hanno quasi esattamente la stessa meccanica di lavoro. Chiamare e applicare vengono utilizzati per il prestito delle funzioni, il prestito della funzione significa utilizzare la funzione di qualche altro oggetto e utilizzare il riferimento di qualche altro oggetto.

Per comprendere meglio questo concetto, crea due oggetti diversi usando le seguenti righe di codice:

var persona1 =
Nome: "John Doe",
Età: 25,
Designazione: "revisore",
printName: function ()
console.registro (questo.nome);
,
;
var persona2 =
Nome: "Baba Yaga",
Età: 22,
Designazione: "disoccupato",
;

Come puoi vedere nello snippet del codice, abbiamo quasi la stessa struttura di entrambi gli oggetti e le stesse coppie di valore chiave, tranne per il fatto che questo persona1 ha la funzione printName Mentre persona2 non. Ma se vuoi stampare il "nome" del persona2 oggetto, puoi farlo usando il metodo "printname" da persona1 oggetto e per il "Questo"Riferimento, si passa nel riferimento dell'oggetto persona2.

Sintassi di chiamata e applicare:

La sintassi di entrambi questi metodi è quasi identica:

Per il metodo di chiamata la sintassi è come:

obj1.funzione.chiamare (refferenceofobject2, arg1 arg2, arg3 ...);

Per applicare il metodo la sintassi è come:

obj1.funzione.applicare (refferenceofobject2, [arg1, arg2, arg3,…]);

Nota: se la funzione che si sta prendendo in prestito ha bisogno di alcuni argomenti aggiuntivi, allora in Metodo di chiamata si passa gli argomenti separati da una virgola ", e nel caso del metodo applica lista di array.

Utilizzo dei metodi chiamate e applica

Tornando al nostro problema originale, possiamo usare il "printName"Funzione da"persona1"Oggetto per stampare il nome del persona2 oggetto usando la seguente riga di codice:

persona1.printName.chiamare (persona2);

Se esegui il comando sopra vedrai il seguente output:

Allo stesso modo, puoi usare il fare domanda a() Metodo per lo stesso scopo usando il codice:

persona1.printName.applicare (persona2);

Ma cosa succede se il printName () La funzione sta assumendo alcuni argomenti come:

printName: function (città, fratelli)
console.log ('$ questo.nome da $ City ha $ fratelli fratelli ');
,

In questo caso, utilizzerai la funzione di chiamata con la seguente riga di codice:

persona1.printName.Chiama (Person2, "New York", 4);

Lo snippet completo del codice è come:

var persona1 =
Nome: "John Doe",
Età: 25,
Designazione: "revisore",
printName: function (città, fratelli)
console.log ('$ questo.nome da $ City ha $ fratelli fratelli ');
,
;
var persona2 =
Nome: "Baba Yaga",
Età: 22,
Designazione: "disoccupato",
;
persona1.printName.Chiama (Person2, "New York", 4);

Se esegui il seguente codice, otterrai l'output come:

Come puoi vedere, sei stato in grado di passare gli argomenti usando il metodo chiamata, puoi farlo usando il fare domanda a() Metodo anche utilizzando il seguente frammento di codice:

var persona1 =
Nome: "John Doe",
Età: 25,
Designazione: "revisore",
printName: function (città, fratelli)
console.log ('$ questo.nome da $ City ha $ fratelli fratelli ');
,
;
var persona2 =
Nome: "Baba Yaga",
Età: 22,
Designazione: "disoccupato",
;
persona1.printName.Applica (Person2, ["New York", 4]);

Nota: per passare argomenti alla funzione presa in prestito attraverso il fare domanda a() Metodo, stiamo usando un array contenente gli argomenti.

Se esegui questo codice otterrai lo stesso output identico di:

Ma cosa succede se non vuoi prendere in prestito una funzione da qualche oggetto? Questo è dove il Metodo di bind entra in gioco.

Il metodo bind ()

non mi piace il chiamata E fare domanda a metodi, legamento I metodi vengono utilizzati per creare una copia di una funzione e quindi posizionare la funzione copiata come attributo dell'oggetto in modo che la funzione possa essere utilizzata in un secondo momento.

Sintassi del metodo Bind

La sintassi è come:

var newfunctionname = object1.funzione.bind (refereceToObject2);

Nota: il metodo BIND restituisce una funzione replicata.

Per dimostrarlo, modifichiamo il codice dall'esempio sopra in questo modo:

var persona1 =
primo nome: "John",
LastName: "Doe",
Età: 25,
printfullName: function ()
console.registro (questo.firstname + "" + questo.cognome);
,
;
var persona2 =
Primo nome: "Baba",
LastName: "Yaga",
Età: 25,
;

Ora se vuoi fare una copia della funzione printfullname dall'oggetto persona1 e rendilo un attributo dell'oggetto persona2 Quindi puoi farlo utilizzando la seguente riga di codice:

var printmyname = persona1.printfullname.Bind (persona2);

Con questa linea, hai "vincolato"Una funzione di attributo Printmyname con l'oggetto persona2, E puoi invocarlo usando il comando:

printmyname ()

Nota: non lo stai chiamando con il persona2 oggetto utilizzando il punto abile perché il riferimento a persona2 L'oggetto è già "vincolato"Alla funzione.

Lo snippet completo del codice è come:

var persona1 =
primo nome: "John",
LastName: "Doe",
Età: 25,
printfullName: function ()
console.registro (questo.firstname + "" + questo.cognome);
,
;
var persona2 =
Primo nome: "Baba",
LastName: "Yaga",
Età: 25,
;
var printmyname = persona1.printfullname.Bind (persona2);
printmyname ();

Quando si esegue questo frammento di codice si ottiene il seguente output:

Ecco, hai duplicato una funzione da persona1 oggetto, ha superato il riferimento di persona2 oggetto e lo memorizzava come una funzione separata.

Conclusione

Chiama, legame E fare domanda a I metodi sono metodi complicati che vengono utilizzati per giocare con il riferimento degli oggetti e aiutarti a ottenere talenti come il prestito delle funzioni e la replicazione della funzione con un riferimento diverso. Per comprendere i dettagli di queste funzioni, abbiamo bisogno di sapere qual è la parola chiave Questo significa in javascript e in che modo il riferimento funziona in js. Hai imparato il funzionamento di questo, chiamare, applicare e vincolare metodi insieme ai loro esempi.