Uno dei concetti più impegnativi e utilizzati di frequente in JavaScript è il ' questo ' parola chiave. JavaScript utilizza il ' questo ” parola chiave in modo diverso rispetto ad altre lingue. Tuttavia, è essenziale per creare codice JavaScript più avanzato. Come principiante, potrebbe essere in qualche modo difficile per te 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 fa riferimento a un oggetto che esegue il blocco di codice esistente. Rappresenta un oggetto che sta invocando la funzione corrente. Viene utilizzato in più scenari in modi diversi, come ad esempio:
-
- Nel metodo
- Nella gestione degli eventi
- Nelle funzioni
Diamo un'occhiata a ciascuno degli usi menzionati uno per uno!
Come utilizzare 'questo' nei metodi JavaScript?
“ questo ” viene utilizzato nei metodi JavaScript come associazione implicita. Quando la funzione viene chiamata con l'aiuto di un oggetto e un punto, viene considerata vincolante implicita e ' questo ” indica l'oggetto durante la chiamata di funzione.
Esempio
Per prima cosa creeremo un oggetto con alcune proprietà e un metodo e poi useremo il ' questo ” parola chiave per ottenere i valori delle proprietà dell'oggetto:
var personInfo = {
nome: 'John' ,
età : venti ,
Informazioni: funzione ( ) {
console.log ( 'Ehi! Io sono' + questo.nome + ' e io sono ' + questa.età + ' Anni' ) ;
}
}
Quindi, chiama il ' Informazioni() ” insieme al nome dell'oggetto:
Si può vedere che i valori delle proprietà specificati dell'oggetto corrente vengono visualizzati correttamente:
Se vuoi usare “ questo ” nella gestione degli eventi, seguire la sezione seguente.
Come utilizzare 'questo' nella gestione degli eventi JavaScript?
In questo esempio, controlla l'uso di ' questo ” parola chiave nella gestione degli eventi. Per questo, considera un esempio in cui nasconderemo il nostro pulsante con un solo clic. Per farlo, crea un pulsante e allega un ' al clic() ” con esso per accedere alla proprietà style.display con “ questo ” parola chiave che nasconderà il pulsante quando viene cliccato:
< h3 > Fare clic per nascondere il pulsante h3 >< pulsante al clic = 'this.style.display='nessuno'' > Clicca qui ! pulsante >
Produzione
Se sei confuso sull'uso di ' questo ” nelle funzioni definite dall'utente in JavaScript, segui la sezione indicata.
Come utilizzare 'questo' nelle funzioni JavaScript?
Durante l'utilizzo di “ questo ” nelle funzioni, ci sono tre tipi di associazioni in JavaScript, tra cui:
-
- Rilegatura predefinita
- Legame implicito
- Legatura esplicita
Capiamoli singolarmente!
Esempio 1: utilizzo di questa parola chiave in Default Binding
Nella rilegatura predefinita, il ' questo La parola chiave ” funge da oggetto globale. Viene utilizzato principalmente in funzioni autonome.
Comprendiamo il concetto affermato con un esempio.
Per prima cosa creeremo una variabile ' X ” e assegnargli il valore “ quindici ”:
var x = quindici ;
Quindi, definisci una funzione denominata ' funzioneDB() ” e la sua definizione di funzione, creare una variabile con lo stesso nome “ X ” e assegnargli un valore “ 5 ”, quindi stamparne il valore utilizzando “ console.log() ” metodo con “ questo ' parola chiave:
var x = 5 ;
console.log ( questo.x ) ;
}
Infine, chiama il ' funzioneDB() ' funzione:
A causa dell'uso del ' questo ” parola chiave, l'output visualizza il valore di “ X ' come ' quindici ” perché agisce come un oggetto globale e il processo si chiama “ Legatura dinamica ”:
Esempio 2: uso di questa parola chiave in Implicit Binding
Quando la funzione viene chiamata da un oggetto o da un punto, “ questo La parola chiave ” funge da associazione implicita. 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 Informazioni ( ) {console.log ( 'Ehi! Io sono' + questo.nome + ' e io sono ' + questa.età + ' Anni' )
}
Quindi, crea un oggetto chiamato ' personaInfo ” con proprietà definite:
nome: 'John' ,
età : venti ,
info: info
}
Ora, chiama la funzione lungo l'oggetto:
Produzione
Esempio 3: utilizzo di questa parola chiave nel binding esplicito
Il legame esplicito è anche chiamato ' rilegatura rigida ” perché la funzione è chiamata forzatamente ad utilizzare un particolare oggetto per “ questo ” vincolante, senza inserire un riferimento a una funzione di proprietà sull'oggetto. A tale scopo, è possibile utilizzare i metodi call(), apply() e bind().
Utilizzeremo ora la stessa funzione denominata “ Informazioni() ” definito nell'esempio precedente. Quindi, crea un oggetto chiamato ' personaInfo ” con i seguenti valori:
var personInfo = {nome: 'John' ,
età : venti
}
Per invocare la funzione denominata “ Informazioni() ”, useremo il “ chiamata() ” e passa l'oggetto creato come argomento:
Poiché info() non fa parte dell'oggetto, vi abbiamo comunque acceduto esplicitamente:
Per chiamare una funzione in modo esplicito, puoi anche usare i metodi apply() e bind(). Il metodo apply() è identico al metodo call(), mentre il metodo bind() crea una nuova funzione con lo stesso corpo e ambito 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 info() con il metodo apply(), utilizzare la seguente istruzione:
info.applica ( personaInfo ) ;
Fornisce lo stesso output del metodo call():
Per aver chiamato ' Informazioni() ' con il ' legamento() ', utilizzare la dichiarazione data:
Produzione
Abbiamo raccolto tutte le informazioni essenziali relative al “ questo ' parola chiave.
Conclusione
“ questo ” è la parola chiave in JavaScript che fa riferimento 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.