PC & Mobile

Le mot clé "this" en JavaScript, démystifié – ITNEXT

Le mot clé "this" en JavaScript, démystifié - ITNEXT


Photo par Simon Abrams sur Unsplash

Quand j'ai commencé à apprendre le JavaScript, il m'a fallu un certain temps pour comprendre les ce mot-clé en JavaScript et pouvoir identifier rapidement quel objet fait la ce point de mot clé à. J'ai trouvé que la chose la plus difficile à comprendre de la ce Le mot clé est que vous oubliez généralement les différents cas et situations que vous avez lus ou que vous avez regardés expliquer à un ou plusieurs des cours ou des ressources JavaScript à partir desquels vous étudiez. Après l’introduction des fonctions fléchées dans ES6, la situation est devenue encore plus confuse car les fonctions fléchées traitent de la ce mot clé d'une manière différente. Je voulais écrire cet article pour exposer ce que j'ai appris et essayer de l'expliquer de manière à aider tous ceux qui apprennent JavaScript et ont de la difficulté à comprendre le ce mot clé comme je le faisais auparavant.

Comme vous le savez peut-être, l'environnement (ou la portée) dans lequel une ligne JavaScript est en cours d'exécution s'appelle «Le contexte d'exécution». Le moteur d'exécution Javascript maintient une pile de ces contextes d'exécution et le contexte d'exécution présent en haut de cette pile est en cours d'exécution. L'objet qui ce variable fait référence à des changements chaque fois que le contexte d'exécution est modifié.

Par défaut, le contexte d’exécution est global, ce qui signifie que si un code est exécuté dans le cadre d’un appel de fonction simple, ce variable fera référence à l'objet global. Dans le cas d'un navigateur, l'objet global est le la fenêtre objet. Dans un environnement Node.js, par exemple, un objet spécial global aura la valeur de ce.

Par exemple, essayez l'appel de fonction simple suivant:

fonction foo () {
console.log ("Appel de fonction simple");
console.log (cette === fenêtre);
}
foo ();

En appelant foo (), nous aurons cette sortie:

“Appel de fonction simple”
vrai

Cela prouve que ce se réfère ici à la global objet, qui est le la fenêtre objet dans notre cas.

Notez que si le mode strict est activé pour une fonction, la valeur de ce sera indéfini car en mode strict objet global se réfère à indéfini à la place du la fenêtre objet.

Essayons l’exemple suivant:

fonction foo () {
'use strict';
console.log ("Appel de fonction simple");
console.log (cette === fenêtre);
}
foo ();

Notre sortie, dans ce cas, sera:

“Appel de fonction simple”
faux

Imaginons maintenant que nous avons la fonction constructeur suivante:

fonction Personne (prénom, nom) {
this.first_name = prenom;
this.last_name = last_name;

this.displayName = function () {
console.log (`Nom: $ {this.first_name} $ {this.last_name}`);
};
}

Créons quelques instances de personne:

let john = new Person ('John', 'Reid');
john.displayName ();

Si nous essayons cela dans notre console, nous devrions obtenir le résultat suivant:

"Nom: John Reid"

Que s'est-il passé ici? Quand on appelle Nouveau sur La personne, JavaScript va créer un nouvel objet à l'intérieur du La personne fonction et enregistrez sous ce. Puis le Prénom, nom de famille et Afficher un nom propriétés seront ajoutées sur le nouvellement créé ce objet. J'ai utilisé cet impressionnant outil de visualisation JavaScript de Tyler McGinnis pour voir à quoi cela ressemble vraiment dans les coulisses. C'est ce que j'ai eu:

Vous remarquerez que nous avons un ce objet créé dans le contexte d'exécution de La personne et que cet objet a les trois propriétés Prénom, nom de famille et Afficher un nom. Cet outil anime de manière intéressante les étapes qui se déroulent dans les coulisses et vous aidera à comprendre comment ce l'objet est créé et rempli.

Nous avons maintenant discuté de deux cas communs liés à la ce liaison de mot clé. Je voulais mentionner un autre cas, qui pourrait aussi être un peu déroutant. Imaginez que nous ayons cette fonction:

fonction simpleFunction () {
console.log ("Appel de fonction simple")
console.log (cette === fenêtre);
}

Nous savons maintenant que si nous faisons un appel de fonction simple comme le suivant, le ce Le mot clé fera référence à l’objet global, dans notre cas c’est le la fenêtre objet. Faisons cela:

simpleFunction ();

En effet, nous obtenons ceci dans notre sortie:

“Appel de fonction simple”
vrai

Créons un objet utilisateur simple comme suit:

laisser l'utilisateur = {
compte: 10,
simpleFunction: simpleFunction,
une autre fonction: function () {
console.log (cette === fenêtre);
}
}

Maintenant, nous avons un fonction simple propriété se référant à notre fonction simple une fonction. Nous avons également ajouté une autre propriété en tant que méthode appelée une autre fonction.

Si on appelle user.simpleFunction () , nous aurons cela dans la sortie de notre console:

“Appel de fonction simple”
faux

Pourquoi est-ce arrivé? Parce que simpleFunction () est maintenant une propriété du utilisateur objet, puis le ce le mot clé fera référence à la utilisateur objet et non l'objet global dans ce cas.

Si on appelle user.anotherFunction () maintenant, nous devrions nous attendre à la même chose. Notre ce le mot clé fera référence à la utilisateur objet. Alors, console.log (cette === fenêtre); devrait revenir faux et nous devrions obtenir cette sortie dans notre console:

faux

Parlons un autre cas. Que se passera-t-il si nous faisons quelque chose comme ce qui suit?

let myFunction = user.anotherFunction;
maFonction ();

Si vous essayez ceci, vous devriez obtenir ce résultat:

vrai

Mais pourquoi est-ce arrivé? Dans ce cas, nous faisons un appel de fonction simple. Comme nous le savons déjà, si une méthode est appelée en tant que fonction simple, alors le ce mot-clé fera référence à l'objet global qui est dans notre cas égal à la la fenêtre objet, et donc console.log (cette === fenêtre); imprimera vrai.

Voyons un autre exemple:

var john = {
nom: 'john',
année de naissance: 1990,
CalculateAge: function () {
console.log (this);
console.log (2016 - this.yearOfBirth);
                fonction innerFunction () {
console.log (this);
}
fonction intérieure ();
}
}

Que se passera-t-il maintenant si nous appelons john.calculateAge () ? Nous devrions avoir quelque chose de similaire à ceci:

{nom: "john", année de naissance: 1990, calculerÂge: ƒ}
26
Window {postMessage: ƒ, flou: ƒ, mise au point: ƒ, proche: ƒ, parent: Window,…}

À l'intérieur de calculer l'âge une fonction, cese réfère à l’objet appelant «john». Mais à l'intérieur fonction intérieure fonction, cette ce se réfère à l'objet global qui dans ce cas est le la fenêtre objet. Certaines personnes voient cela comme un bogue dans JS, mais la règle dit que chaque fois que nous faisons un appel de fonction normal, alors ce fera référence à l'objet global.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close