JavaScript questo | Spiegato

JavaScript questo | Spiegato

Uno dei concetti più impegnativi e usati frequentemente in JavaScript è il "Questo" parola chiave. JavaScript usa "Questo"Parola chiave in modo diverso rispetto ad altre lingue. Tuttavia, è essenziale per creare un codice JavaScript più avanzato. Come principiante, potrebbe essere in qualche modo difficile capire l'uso della parola chiave menzionata, ma non preoccuparti!

Questo post spiegherà il "Questo"Parola chiave e il suo utilizzo in JavaScript.

Cos'è "questo" in javascript?

"Questo"È la parola chiave in JavaScript che si riferisce a un oggetto che esegue il blocco di codice esistente. Rappresenta un oggetto che sta invocando la funzione corrente. È usato in più scenari in modi diversi, come:

    • Nel metodo
    • Nella gestione degli eventi
    • In funzioni

Dai un'occhiata a ciascuno degli usi menzionati uno per uno!

Come usare "questo" nei metodi JavaScript?

"Questo"È usato nei metodi JavaScript come legame implicito. Quando la funzione viene chiamata con l'aiuto di un oggetto e un punto, è considerata implicita e "Questo"Indica l'oggetto durante la chiamata di funzione.

Esempio

Innanzitutto, creeremo un oggetto con alcune proprietà e un metodo e quindi useremo il "Questo"Parola chiave per ottenere i valori delle proprietà dell'oggetto:

var personinfo =
Nome: "John",
Età: 20,
info: function ()
console.registro ("hy! Sono " + questo.nome + "e io sono" + questo.età + "anni");


Quindi, chiama il "informazioni()"Metodo insieme al nome dell'oggetto:

Personinfo.informazioni();


Si può vedere che i valori di proprietà specificati dell'oggetto corrente vengono visualizzati correttamente:


Se vuoi usare "Questo"Nella gestione degli eventi, seguire la sezione seguente.

Come usare "questo" nella gestione degli eventi JavaScript?

In questo esempio, controlla l'uso del "Questo"Parola chiave nella gestione degli eventi. Per questo, considera un esempio in cui nasconderemo il nostro pulsante con un solo clic. Per fare ciò, creare un pulsante e allegare un "al clic()"Evento con esso per accedere allo stile.Visualizza la proprietà con il “Questo"Parola chiave che nasconderà il pulsante quando è cliccata:

Fare clic per nascondere il pulsante



Produzione


Se sei confuso sull'uso del "Questo"Parola chiave nelle funzioni definite dall'utente in JavaScript, seguire la sezione data.

Come usare "questo" nelle funzioni JavaScript?

Mentre usi "Questo"Nelle funzioni, ci sono tre tipi di legami in JavaScript, tra cui:

    • Binding predefinito
    • Legame implicito
    • Vincolo esplicito

Cadiamoli individualmente!

Esempio 1: utilizzare questa parola chiave in binding predefinito

Nel legame predefinito, il "Questo"La parola chiave funge da oggetto globale. È principalmente utilizzato nelle funzioni autonome.

Comprendiamo il concetto dichiarato con un esempio.

Innanzitutto, creeremo una variabile "X"E assegnagli il valore"15":

var x = 15;


Quindi, definisci una funzione chiamata "functiondb ()"E la sua definizione di funzione, crea una variabile con lo stesso nome"X"E assegnalo un valore"5", Quindi, stampare il suo valore usando il"console.tronco d'albero()Metodo "con"Questo" parola chiave:

var functiondb = function ()
var x = 5;
console.registro (questo.X);


Infine, chiama il "functiondb ()" funzione:

functiondb ();


A causa dell'uso del "Questo"Parola chiave, l'output visualizza il valore di"X" COME "15"Perché funge da oggetto globale e il processo è chiamato"Legame dinamico":


Esempio 2: uso di questa parola chiave nel legame implicito

Quando la funzione viene chiamata da un oggetto o da un simbolo DOT, "Questo"La parola chiave funge da legame implicito. Indica l'oggetto durante la chiamata di funzione.

In questo esempio, definiremo una funzione "informazioni()"E usa il"Questo"Parola chiave nella definizione della funzione:

funzione info ()
console.registro ("hy! Sono " + questo.nome + "e io sono" + questo.età + "anni")


Quindi, crea un oggetto chiamato "Personinfo"Con proprietà definite:

var personinfo =
Nome: "John",
Età: 20,
Informazioni: informazioni


Ora, chiama la funzione lungo l'oggetto:

Personinfo.informazioni();


Produzione


Esempio 3: uso di questa parola chiave in legame esplicito

Il legame esplicito è anche chiamato "rilegatura dura"Perché la funzione viene chiamata con forza per utilizzare un oggetto particolare per"Questo"Binding, senza mettere un riferimento alla funzione di proprietà sull'oggetto. A tale scopo, è possibile utilizzare i metodi di call (), Applica () e bind ().

Ora utilizzeremo la stessa funzione denominata "informazioni()"Definito nell'esempio precedente. Quindi, crea un oggetto chiamato "Personinfo"Con i seguenti valori:

var personinfo =
Nome: "John",
Età: 20


Per invocare la funzione denominata "informazioni()", Useremo il"chiamata()"Metodo e passare l'oggetto creato come un argomento:

informazioni.Chiama (PersonInfo);


Dato che Info () non fa parte dell'oggetto, abbiamo ancora esplicitamente acceduto:


Per chiamare esplicitamente una funzione, è possibile utilizzare anche i metodi Applica () e Bind (). Il metodo Applica () è identico al metodo call (), mentre il metodo bind () crea una nuova funzione con lo stesso corpo e portata che si comporta allo stesso modo della funzione originale. Il metodo bind () può essere utilizzato per restituire una funzione che è possibile utilizzare in seguito.

Per chiamare informazioni () con il metodo Applica (), utilizzare la seguente istruzione:

informazioni.applicare (PersonInfo);


Fornisce lo stesso output del metodo call () dà:


Per chiamare "informazioni()" con il "legamento()"Metodo, utilizza la dichiarazione data:

informazioni.Bind (PersonInfo);


Produzione


Abbiamo compilato tutte le informazioni essenziali relative al "Questo" parola chiave.

Conclusione

"Questo"È la parola chiave in JavaScript che si riferisce a un oggetto che esegue il blocco di codice esistente. Rappresenta l'oggetto che sta invocando la funzione corrente. Viene utilizzato in più scenari in modi diversi, inclusi metodi, gestione degli eventi e funzioni. In questo post, abbiamo spiegato il "Questo"Parola chiave in JavaScript.