Qu'est-ce que «ce» mot-clé en JavaScript?
Comme nous savons que les objets sont les blocs de construction de base de JavaScript, il existe également un objet spécial appelé «cet» objet et la valeur de «ceci» peut être vue dans chaque ligne d'exécution JavaScript qui est à nouveau décidée en fonction de la façon dont le code est en cours d'exécution. Dans cette rubrique, nous allons découvrir le mot-clé «this» en JavaScript.
Importance du mot-clé «this» dans JavaScript
- L'objet «this» en JavaScript a de nombreux rôles et utilisations importants. Il est principalement utilisé pour pointer vers une instance d'un objet à partir de sa propre méthode ou constructeur. En plus de pointer, «ceci» peut également être utilisé pour garder une trace de l'exécution du contexte qui est basée sur l'endroit où la fonction est appelée.
- La prochaine chose à propos de la fonction «this» en JavaScript est que le lien vers le contexte d'exécution peut changer. Enfin, le lien vers le contexte d'exécution peut également être établi lorsqu'il est référencé par une fonction de rappel, même si la fonction est définie à l'intérieur de l'objet constructeur.
Pourquoi utiliser «ce» mot-clé en JavaScript?
- En JavaScript, «ce» mot-clé est utilisé dans de nombreux contextes pour tirer le meilleur parti des contextes. Fondamentalement, le mot-clé «this» est utilisé pour faire référence à un objet ou une fonction en JavaScript. Comme par le mot (ceci) lui-même, nous pouvons comprendre qu'il fait référence à quelque chose. Pour mieux comprendre «ceci» de manière pratique, nous pouvons considérer un exemple que M. X a joué au cricket et qu'il a gagné le match.
- Donc, ici au lieu d'utiliser à nouveau M. X, nous avons utilisé «il» qui fait référence à M. X uniquement. Cela nous aide à ne pas continuer à mentionner la même chose encore et encore. De la même manière, en JavaScript également, nous pouvons utiliser 'cette' fonction ou cet objet pour référencer une autre fonction ou un objet avec la valeur invoquée dans cette fonction ou cet objet. Habituellement, «ceci» est utilisé à l'intérieur d'une fonction ou d'une méthode, mais il peut également être utilisé à l'extérieur de la fonction (sous la portée globale).
Comment utiliser le mot-clé «this»?
- Comme nous savons que JavaScript est un langage de script, il n'est donc pas nécessaire de compiler les codes, il est exécuté au moment de l'exécution. Il peut être exécuté directement par l'interpréteur, ligne par ligne. Et l'environnement ou la portée dans laquelle les codes JavaScript sont exécutés est appelé «Contexte d'exécution».
- Le runtime JavaScript conserve une pile de contextes d'exécution et maintient la pile actuelle au sommet. L'objet référencé par «ceci» est modifié à chaque modification du contexte d'exécution.
- Simplement, nous pouvons supposer que lorsqu'une fonction est créée en même temps, un mot-clé «this» est également créé (derrière la scène) qui relie à l'objet où la fonction opère. Le mot-clé «this» fonctionne différemment en JavaScript des autres langages de programmation.
Il a différentes valeurs selon l'endroit où nous l'utilisons, par exemple:
- 'ceci' fait référence à l'objet propriétaire dans une méthode.
- «ceci» fait référence à l'objet global dans la seule situation.
- «ceci» fait également référence aux objets globaux dans une fonction simple.
- «ceci» fait référence à un élément d'un événement qui reçoit l'événement.
- 'ceci' n'est pas défini dans une fonction en mode strict.
1. Utilisé avec un champ
Exemple : ci-dessous, «ceci» fait référence à un objet appelé la personne. Et la personne est propriétaire de la méthode fullName.
var employee = (
firstName: “Raju”,
lastName: “Chaudhury”,
id: 123
fullName: function() (
return this.firstName + “ ” + this.lastName;
)
)
Un petit exemple pour un champ de formulaire:
check to alert this object name
Mettez le nom et cochez l'option radio ci-dessous pour alerter votre entrée
Cochez cette case pour alerter la saisie du champ de texte
Remarquez le gestionnaire d'événements onsubmit lors de l'ouverture du formulaire pour voir l'action effectuée lorsque vous cliquez sur le bouton Soumettre
2. Utilisé pour appeler un constructeur
Habituellement, lorsque nous utilisons le mot-clé 'new' pour créer une instance pour un objet fonction, nous utilisons la fonction comme constructeur.
Dans l'exemple ci-dessous, nous déclarons une fonction Bike puis l'invoquons en tant que constructeur:
function Bike(name)(
this.name = name;
)
Bike.prototype.getName = function()(
return this.name;
)
var bike = new Bike('Pulsar');
console.log(bike.getName());
Dans l'exemple ci-dessus, le nouveau vélo («Pulsar») est un constructeur de la fonction vélo. Ici, JavaScript crée un nouvel objet et place le mot-clé «this» dans l'objet nouvellement créé. Donc, maintenant nous pouvons invoquer Bike () comme fonction ou comme constructeur. Ici, au cas où nous supprimerions le mot-clé «nouveau», il affichera une erreur comme ci-dessous:
var bajaj = Bike('Bajaj');
console.log(bajaj.name);
/ * Il apparaîtra comme TypeError: Impossible de lire la propriété 'nom' de non défini * /
Cela parce que cette fonction dans Bike () est placée dans l'objet global, bajaj.name résulte indéfini.
Pour que la fonction Bike () soit toujours invoquée à l'aide du constructeur, nous vérifions au début de la fonction Bike () comme ci-dessous:
function Bike(name)(
if( ! (this instanceof Bike)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)
Il existe une méta-propriété connue sous le nom de «new.target» qui permet de détecter si une fonction est invoquée en tant que simple invocation ou constructeur.
Ici, nous pouvons éditer la fonction Bike () qui utilise la méta-propriété new.target comme ci-dessous
function Bike(name)(
if( ! new.target)(
throw Error(“We should use new operator to call a function”);
)
this.name = name;
)
3. Utilisé pour renvoyer l'instance de classe actuelle
Une expression de classe est également un moyen de définir une classe en JavaScript. Il peut également être nommé ou non. Le nom est le local de son corps de classe et t peut être récupéré par les propriétés de la classe.
/ * exemple pour une expression de classe sans nom * /
let Mobile = class (
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name); //Output: Mobile
/ * exemple pour une expression de classe nommée * /
let Mobile = class Mobile2(
constructor(cost, weight)(
this.cost = cost;
this.weight = weight;
)
);
console.log(Mobile.name);
Sortie: Mobile2
4. Utilisé comme paramètre de méthode
Lorsque nous appelons une méthode d'un objet, JavaScript met «this» à l'objet qui possède la méthode.
Exemple:
var Bike = (
name: 'Pulsar',
getName: function()(
return this.name;
)
)
console.log(bike.getName()); /*Pulsar*/
Ici, cette méthode getName () se réfère à un objet vélo.
Conclusion
Le mot-clé 'this' en JavaScript est un outil puissant qui aide généralement les développeurs à référencer les propriétés dans des contextes spécifiques, mais il peut parfois être assez difficile également lors de l'application à travers les différents niveaux de portée. La valeur de 'this' peut également être définie explicitement avec call (), bind () et apply () également. Habituellement, la valeur de «ceci» est déterminée par le contexte d'exécution de la fonction. Les fonctions fléchées ne lient généralement pas «ceci» et au lieu de cela, «ceci» est lié lexicalement.
Articles recommandés
Ceci est un guide pour «ce» mot-clé en JavaScript. Ici, nous discutons de l'importance et de la façon d'utiliser «ce» mot-clé en JavaScript avec l'exemple. Vous pouvez également consulter l'article suivant.
- Encapsulation en JavaScript
- Tri par insertion en JavaScript
- Palindrome en JavaScript
- Compilateurs JavaScript
- ce mot-clé en java | Exemples de ce mot-clé
- Règles d'instanceOf en Java avec exemple