Quel est le mot-clé «ce» en javascript?

Si vous avez programmé en Java, C ++ ou tout autre langage, vous devez être familier avec le mot-clé «ce». Cependant, en JavaScript, cela fonctionne un peu différemment. C'est différent parce que JavaScript offre un mode strict. Le mode strict est l'endroit où nous ne pouvons pas utiliser les variables non déclarées. Le mode strict aide également à déboguer.

Le mot-clé «ceci» est largement utilisé dans presque tous les langues de programmation. Cependant, c'est aussi le concept le plus déroutant. Si vous êtes un débutant, ne vous inquiétez pas, nous couvrirons aujourd'hui presque tout sur le mot-clé «ce» en JavaScript ainsi que des exemples. Alors asseyez-vous et laissez le trajet commencer.

Quel est le mot-clé «ce»

La définition la plus simple du mot-clé «ce» est qu'il pointe vers ou fait référence à un objet à lequel il appartient. Nous pouvons également dire qu'il fait référence à cet objet qui appelle actuellement la fonction / méthode.

Maintenant que nous savons ce que signifie le mot clé «ce», découvrons où il est utilisé. La valeur du mot clé «ce» diffère également en fonction de l'endroit où il est utilisé.

Utiliser le mot clé «ce» seul

Le mot-clé «ceci» peut être utilisé seul sans aucune méthode. Cependant, il tient alors la référence à l'objet global. Par exemple:

const xyz = this;
alerte (xyz);

Dans cet exemple, nous avons initialisé une variable, qui stocke la référence à l'objet global. Il convient de garder à l'esprit que l'objet global de fenêtre de navigateur est [fenêtre d'objet]. Lorsque nous exécuterons le code suivant, nous obtiendrons l'alerte suivante:

Nous pouvons également utiliser le mot-clé «ce» seul en utilisant le mode strict. La solution sera la même I-E, il affichera l'alerte [Fenêtre d'objet]. Le code ressemblera à ceci:

const xyz = this;
alerte (xyz);

En utilisant le mot-clé «ce» dans la fonction

L'utilisation du mot-clé «ce» dans une fonction est le moyen par défaut. Le mot-clé «ce» fera également référence à l'objet global dans une fonction. Par exemple:

fonction myfunc ()
alerte (ceci);

myfunc ();

Cependant, si nous utilisons ce mot clé en mode strict, le résultat n'est pas défini. C'est parce que en mode strict, Javascript restreint la liaison par défaut. Par exemple:

Utilisez strict ";
fonction myfunc ()
alerte (ceci);

myfunc ();

Dans cet exemple, nous avons utilisé «Utiliser Strict». Nous serons retournés indéfinis lorsque nous exécuterons ce code.

Utilisation du mot-clé «ce» dans les gestionnaires d'événements

Les gestionnaires d'événements gèrent les événements. Par exemple, si vous cliquez sur un bouton, ce clic sera géré par des gestionnaires d'événements. Si nous voulons nous référer à cet élément de bouton dans HTML à partir duquel nous avons reçu le clic, nous utilisons le mot-clé «ce».
Par exemple, supposons que nous ayons un bouton. Nous voulons le faire disparaître une fois que nous avons cliqué dessus. Nous y parviendrons par le code suivant:

HTML:

Cliquez sur moi pour voir la magie

Javascript:

const btn = document.queySelector (".Vanish-btn ");
btn.addEventListener ('click', function ()
ce.style.affiche = "aucun";
)

Dans ce code, dans HTML, nous avons d'abord créé un bouton avec le nom de classe de "Vanish-BTN". Après cela, nous avons mis la balise de script où nous avons référencé le nom de fichier de JavaScript. Dans le fichier JavaScript, nous obtenons d'abord la référence du bouton dans "BTN" à l'aide du nom de la classe. Après cela, nous avons mis un écouteur d'événements en cliquant sur un bouton. Dans ce cas chaque fois que le bouton sera cliqué, la fonction de rappel s'exécutera où nous avons fait l'affichage du bouton.

Avant de cliquer sur le bouton, le navigateur ressemblera à ceci:

Lorsque nous cliquons sur le Cliquez sur moi pour voir la magie bouton il disparaîtra.

Liaison de la méthode d'objet

Nous donnerons d'abord quelques exemples, puis nous en discuterons pour saisir le concept. Cependant, gardez à l'esprit que le mot-clé «ceci» est l'objet de joueur défini dans l'exemple suivant ou l'objet parent qu'il fait référence.

const Player =
Nom: "Hazard",
Club: "Chelsea",
Shirtno: 10,
myfunc: function ()
retourner ceci.nom;

;
alerte (joueur.myfunc () + "joue pour" + lecteur.club);

Dans cet exemple, nous avons lancé un objet avec le nom de «Joueur». Nous avons spécifié ses propriétés comme le nom, le club et le numéro de chemise. Après cela, nous avons fait une fonction. En fin de compte, nous alerter la fonction d'objet du joueur et le club pour lequel il joue. Ceci est utilisé dans le myfunc () fonction. En cela, il fait référence au nom du joueur avec les mots clés «ceci. nom". Le résultat dans une alerte ressemblera à ceci:

Mot-clé «ceci» dans une fonction flèche

Les fonctions de flèche ont d'abord été introduites dans la version ES6 et ont une fonction similaire à une fonction JavaScript standard, sauf que les fonctions Arrow raccourcissent la syntaxe.
Par exemple:

fonction myfunc ()
retourner "Champions de l'Europe"

myfunc ();

Cela peut être écrit comme:

const myfunc = () =>
retourner "Champions de l'Europe";

Le mot-clé «ceci» est géré différemment dans une fonction flèche que dans la fonction par défaut. Pour être précis, les fonctions Arrow n'ont aucune liaison du mot-clé «ce». De plus, le mot clé «ce» fait référence à la variable ou à l'objet qui a défini la fonction de flèche.
Par exemple:

const Player = () => (
Nom: "Hazard",
Club: "Chelsea",
Shirtno: 10,
myfunc: function ()
retourner ceci.nom;

);
alerte (joueur ().myfunc ());

Mot-clé «ceci» ici a fait référence au joueur comme la fonction de flèche définie par le joueur.

Conclusion

Dans cet article, nous avons discuté de ce qu'est «ce» mot-clé »et comment il est utilisé. Nous avons également discuté où et comment nous pouvons utiliser le mot-clé «ce». Tout cela avec l'aide d'exemples. «Ce mot-clé» est un concept important de JavaScript et surtout les débutants luttent avec cela. Nous espérons que ce message a clarifié toutes les ambiguïtés que vous pourriez avoir.