Javascript ceci | Expliqué

Javascript ceci | Expliqué

L'un des concepts les plus difficiles et les plus fréquemment utilisés en JavaScript est le «ce" mot-clé. JavaScript utilise le «ce»Mot-clé différemment des autres langues. Cependant, il est essentiel pour créer un 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 message expliquera le «ce»Mot-clé et son utilisation en JavaScript.

Qu'est-ce que «ceci» en javascript?

"ce"Est le mot-clé de JavaScript qui fait référence à un objet qui exécute le bloc de code existant. Il représente un objet qui invoque la fonction actuelle. Il est utilisé dans plusieurs scénarios de différentes manières, tels que:

    • En méthode
    • Dans la gestion des événements
    • En fonction

Voyons chacun des utilisations mentionnées une par une!

Comment utiliser «ceci» dans les méthodes JavaScript?

"ce”Est ​​utilisé dans les méthodes JavaScript comme une 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 «ce»Souligne l'objet pendant l'appel de fonction.

Exemple

Tout d'abord, nous créerons un objet avec certaines propriétés et une méthode, puis utiliserons le "ce”Mot-clé pour obtenir les valeurs des propriétés de l'objet:

var personinfo =
Nom: "John",
Âge: 20,
info: function ()
console.journal ("hy! Je suis "+ ceci.nom + "et je suis" + ceci.Âge + "ans");


Ensuite, appelez le «Info()”Méthode avec le nom de l'objet:

personne.Info();


On peut voir que les valeurs de propriété spécifiées de l'objet actuel sont affichées avec succès:


Si vous voulez utiliser "ce"Dans la manipulation des événements, suivez la section ci-dessous.

Comment utiliser «ceci» dans la gestion des événements JavaScript?

Dans cet exemple, consultez l'utilisation du «ce»Mot-clé dans la gestion des événements. Pour cela, considérons un exemple dans lequel nous masquerons notre bouton en un seul clic. Pour ce faire, créez un bouton et attachez un "sur clic()»Événement avec lui pour accéder au style.Afficher la propriété avec le «ce»Mot-clé qui masquera le bouton lorsque vous cliquez sur:

Cliquez pour masquer le bouton



Sortir


Si vous êtes confus quant à l'utilisation du «ce”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 "ce«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

En liaison par défaut, le «ce»Le mot-clé agit comme un objet global. Il est principalement utilisé dans les fonctions autonomes.

Comprenons le concept déclaré avec un exemple.

Tout d'abord, nous créerons une variable "X"Et attribuez-lui la valeur"15»:

var x = 15;


Ensuite, définissez une fonction nommée «functiondb ()"Et sa définition de fonction, créez une variable avec le même nom"X"Et attribuez-lui une valeur"5», Ensuite, imprime sa valeur en utilisant le«console.enregistrer()"Méthode avec"ce" mot-clé:

var functiondb = function ()
var x = 5;
console.journal (ceci.X);


Enfin, appelez le «functiondb ()" fonction:

functiondb ();


En raison de l'utilisation du «ce»Mot-clé, la sortie affiche la valeur de«X" comme "15"Parce qu'il agit comme un objet global et que le processus est appelé"Liaison dynamique»:


Exemple 2: Utilisation de ce mot-clé dans la liaison implicite

Lorsque la fonction est appelée par un objet ou un symbole de point, «ce»Le mot-clé agit comme une liaison implicite. Il souligne l'objet pendant l'appel de la fonction.

Dans cet exemple, nous définirons une fonction "Info()"Et utilisez le"ce”Mot-clé dans la définition de la fonction:

fonction info ()
console.journal ("hy! Je suis "+ ceci.nom + "et je suis" + ceci.Âge + "ans")


Ensuite, créez un objet nommé «personne”Avec des propriétés définies:

var personinfo =
Nom: "John",
Âge: 20,
Info: info


Maintenant, appelez la fonction le long de l'objet:

personne.Info();


Sortir


Exemple 3: Utilisation de ce mot-clé dans une liaison explicite

La liaison explicite est également appelée «reliure dure«Parce que la fonction est appelée avec force pour utiliser un objet particulier pour«ce”Liaison, sans mettre de référence de fonction de propriété sur l'objet. À cette fin, les méthodes Call (), appliquer () 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é «personne«Avec les valeurs suivantes:

var personinfo =
Nom: "John",
Âge: 20


Pour invoquer la fonction nommée «Info()», Nous utiliserons le«appel()”Méthode et transmettez l'objet créé en tant qu'argument:

Info.Appelez (PersonInfo);


Étant donné que l'info () ne fait pas partie de l'objet, nous y accessibles explicitement:


Pour appeler une fonction explicitement, vous pouvez également utiliser les méthodes applicables () et lier (). La méthode applique () 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 pouvez utiliser plus tard.

Pour appeler info () avec la méthode appliquer (), utilisez l'énoncé suivant:

Info.postuler (personinfo);


Il donne la même sortie que la méthode Call () donne:


Pour appeler "Info()" avec le "lier()”Méthode, utilisez l'instruction donnée:

Info.lier (personinfo);


Sortir


Nous avons compilé toutes les informations essentielles liées au «ce" mot-clé.

Conclusion

"ce"Est le mot-clé de JavaScript qui fait référence à un objet qui exécute le bloc de code existant. Il représente l'objet qui invoque la fonction actuelle. Il est utilisé dans plusieurs scénarios de différentes manières, y compris les méthodes, la manipulation des événements et les fonctions. Dans cet article, nous avons expliqué le «ce»Mot-clé en JavaScript.