L'un des concepts les plus difficiles et les plus fréquemment utilisés en JavaScript est le ' cette ' mot-clé. JavaScript utilise le ' cette ” mot-clé différemment des autres langues. Cependant, il est essentiel pour créer du code JavaScript plus avancé. En tant que débutant, il pourrait être difficile pour vous de comprendre l'utilisation du mot-clé mentionné, mais pas de soucis !
Ce post vous expliquera le ' cette ” mot-clé et son utilisation en JavaScript.
Qu'est-ce que 'ceci' en JavaScript ?
' cette ' est le mot-clé en JavaScript qui fait référence à un objet qui exécute le bloc de code existant. Il représente un objet qui appelle la fonction en cours. Il est utilisé dans plusieurs scénarios de différentes manières, telles que :
-
- En méthode
- Dans la gestion des événements
- Dans les fonctions
Voyons chacune des utilisations mentionnées une par une !
Comment utiliser 'ceci' dans les méthodes JavaScript ?
' cette ” est utilisé dans les méthodes JavaScript en tant que liaison implicite. Lorsque la fonction est appelée à l'aide d'un objet et d'un point, elle est considérée comme une liaison implicite, et ' cette » précise l'objet lors de l'appel de la fonction.
Exemple
Tout d'abord, nous allons créer un objet avec des propriétés et une méthode, puis utiliser le ' cette ” mot-clé pour obtenir les valeurs des propriétés de l'objet :
var infopersonne = {
Nom: 'John' ,
âge : vingt ,
Info: fonction ( ) {
console.log ( 'Hé ! je suis ' + ce.nom + ' et je suis ' + cet âge + ' ans' ) ;
}
}
Ensuite, appelez le ' Info() ” méthode avec le nom de l'objet :
On peut voir que les valeurs de propriété spécifiées de l'objet actuel sont affichées avec succès :
Si vous souhaitez utiliser ' cette ” dans la gestion des événements, suivez la section ci-dessous.
Comment utiliser 'ceci' dans la gestion des événements JavaScript ?
Dans cet exemple, vérifiez l'utilisation du ' cette ” mot-clé dans la gestion des événements. Pour cela, considérons un exemple dans lequel nous allons masquer notre bouton d'un simple clic. Pour ce faire, créez un bouton et joignez un ' sur clic() ' pour accéder à la propriété style.display avec l'événement ' cette ” mot-clé qui masquera le bouton une fois cliqué :
< h3 > Cliquez pour masquer le bouton h3 >< bouton sur clic = 'this.style.display='aucun'' > Cliquez ici ! bouton >
Production
Si vous n'êtes pas sûr de l'utilisation de ' cette ” mot-clé dans les fonctions définies par l'utilisateur en JavaScript, suivez la section donnée.
Comment utiliser 'ceci' dans les fonctions JavaScript ?
En utilisant ' cette ” dans les fonctions, il existe trois types de liaisons en JavaScript, notamment :
-
- Liaison par défaut
- Liaison implicite
- Liaison explicite
Comprenons-les individuellement!
Exemple 1 : Utilisation de ce mot-clé dans la liaison par défaut
Dans la liaison par défaut, le ' cette ” le mot-clé agit comme un objet global. Il est principalement utilisé dans les fonctions autonomes.
Comprenons le concept énoncé avec un exemple.
Tout d'abord, nous allons créer une variable ' X ' et attribuez-lui la valeur ' quinze ” :
var x = quinze ;
Ensuite, définissez une fonction nommée ' fonctionDB() ' et sa définition de fonction, créez une variable avec le même nom ' X ' et attribuez-lui une valeur ' 5 », puis imprimez sa valeur en utilisant le « console.log() 'méthode avec' cette ' mot-clé:
var x = 5 ;
console.log ( Cette x ) ;
}
Enfin, appelez le ' fonctionDB() ' fonction:
En raison de l'utilisation du ' cette ', la sortie affiche la valeur de ' X ' comme ' quinze ' car il agit comme un objet global et le processus est appelé ' Liaison dynamique ” :
Exemple 2 : Utilisation de ce mot-clé dans Implicit Binding
Lorsque la fonction est appelée par un objet ou un symbole de point, ' cette ” Le mot-clé agit comme une liaison implicite. Il pointe l'objet lors de l'appel de la fonction.
Dans cet exemple, nous allons définir une fonction ' Info() ' et utilisez le ' cette ” mot-clé dans la définition de la fonction :
fonction Info ( ) {console.log ( 'Hé ! je suis ' + ce.nom + ' et je suis ' + cet âge + ' ans' )
}
Ensuite, créez un objet nommé ' personneInfo ” avec des propriétés définies :
Nom: 'John' ,
âge : vingt ,
infos : infos
}
Maintenant, appelez la fonction le long de l'objet :
Production
Exemple 3 : Utilisation de ce mot-clé dans Explicit Binding
La liaison explicite est également appelée ' reliure rigide ' parce que la fonction est appelée avec force pour utiliser un objet particulier pour ' cette ” liaison, sans mettre une référence de fonction de propriété sur l'objet. Pour cela, les méthodes call(), apply() et bind() peuvent être utilisées.
Nous allons maintenant utiliser la même fonction nommée ' Info() » défini dans l'exemple précédent. Ensuite, créez un objet nommé ' personneInfo ” avec les valeurs suivantes :
var infopersonne = {Nom: 'John' ,
âge : vingt
}
Pour invoquer la fonction nommée ' Info() », nous utiliserons le « appel() ” et transmettez-lui l'objet créé en tant qu'argument :
Comme l'info() ne fait pas partie de l'objet, nous y avons quand même explicitement accédé :
Pour appeler une fonction explicitement, vous pouvez également utiliser les méthodes apply() et bind(). La méthode apply() est identique à la méthode call(), tandis que la méthode bind() crée une nouvelle fonction avec le même corps et la même portée qui se comporte de la même manière que la fonction d'origine. La méthode bind() peut être utilisée pour renvoyer une fonction que vous pourrez utiliser ultérieurement.
Pour appeler info() avec la méthode apply(), utilisez l'instruction suivante :
info.appliquer ( personneInfo ) ;
Il donne le même résultat que la méthode call() :
Pour appeler ' Info() ' avec le ' lier() ', utilisez l'instruction donnée :
Production
Nous avons compilé toutes les informations essentielles liées au « cette ' mot-clé.
Conclusion
' cette ' est le mot-clé en JavaScript qui fait référence à un objet qui exécute le bloc de code existant. Il représente l'objet qui appelle la fonction en cours. Il est utilisé dans plusieurs scénarios de différentes manières, y compris les méthodes, la gestion des événements et les fonctions. Dans cet article, nous avons expliqué le ' cette ” mot-clé en JavaScript.