Le mot-clé this

Quand une fonction est créée, un mot clé appelé ce est créé (dans les coulisses), qui relie à l'objet dans lequel la fonction opère. Dit autrement, ce est disponible pour l'étendue de sa fonction, mais est une référence à l'objet dont cette fonction est une propriété ou une méthode.

Permet de jeter un oeil à la Cody objet d'un article précédent:

Échantillon: sample98.html

 

Remarquez comment à l'intérieur de la obtenirGender fonction, nous accédons à la le sexe propriété utilisant la notation par points (cody.gender) sur le Cody objet lui-même. Ceci peut être réécrit en utilisant ce accéder au Cody objet parce que ce pointe vers le Cody objet.

Échantillon: sample99.html

 

le ce utilisé dans this.gender fait simplement référence à l'objet cody sur lequel la fonction est utilisée.

Le sujet de ce peut être déroutant, mais cela ne doit pas nécessairement l'être. Rappelez-vous qu'en général, ce est utilisé dans les fonctions pour faire référence à l'objet dans lequel la fonction est contenue, par opposition à la fonction elle-même (les exceptions incluent l'utilisation de Nouveau mot clé ou appel() et appliquer()).

Le mot clé ce ressemble à n'importe quelle autre variable, sauf que vous ne pouvez pas la modifier.

Par opposition à arguments et tous les paramètres envoyés à la fonction, ce est un mot clé (pas une propriété) dans l'objet call / activation.


Comment est la valeur de ce Déterminé?

La valeur de ce, passé à toutes les fonctions, est basé sur le contexte dans lequel la fonction est appelée au moment de l'exécution. Faites attention ici, car c’est l’une de ces bizarreries qu'il vous suffit de mémoriser.

le monObjet objet dans l'exemple de code suivant reçoit une propriété appelée sayFoo, qui pointe vers le sayFoo une fonction. Quand le sayFoo la fonction est appelée à partir de la portée globale, ce se réfère à la la fenêtre objet. Quand on l'appelle comme méthode de myObject, ce fait référence à monObjet.

Puisque monObjet a une propriété nommée foo, cette propriété est utilisée.

Échantillon: sample100.html

 

Clairement, la valeur de ce est basé sur le contexte dans lequel la fonction est appelée. Considérer que les deux myObject.sayFoo et sayFoo pointez sur la même fonction. Cependant, selon où (le contexte) sayFoo () est appelé à partir de, la valeur de ce est différent.

Si cela vous aide, voici le même code avec l'objet head (la fenêtre) explicitement utilisé.

Échantillon: sample101.html

 

Assurez-vous que lorsque vous transmettez des fonctions ou que vous avez plusieurs références à une fonction, vous réalisez que sa valeur changera en fonction du contexte dans lequel vous appelez la fonction..

Toutes les variables sauf ce et arguments suivre la portée lexicale


le ce Le mot-clé fait référence à l'objet principal dans les fonctions imbriquées.

Vous vous demandez peut-être ce qui se passe ce quand il est utilisé à l'intérieur d'une fonction qui est contenue à l'intérieur d'une autre fonction. La mauvaise nouvelle est dans ECMA 3, ce perd son chemin et fait référence à l’objet tête (le la fenêtre objet dans les navigateurs), au lieu de l'objet dans lequel la fonction est définie.

Dans le code suivant, ce à l'intérieur de func2 et func3 perd son chemin et se réfère pas à monObjet mais à la tête de l'objet.

Échantillon: sample102.html

 

La bonne nouvelle est que cela sera corrigé dans ECMAScript 5. Pour l'instant, vous devez être conscient de cette situation, en particulier lorsque vous commencez à transmettre des fonctions en tant que valeurs à d'autres fonctions..

Examinez le prochain exemple et que se passe-t-il lorsqu’on passe une fonction anonyme à foo.func1. Lorsque la fonction anonyme est appelée à l'intérieur de foo.func1 (une fonction à l'intérieur d'une fonction), le ce la valeur à l'intérieur de la fonction anonyme sera une référence à l'objet head.

Échantillon: sample103.html

 

Maintenant, vous n'oublierez jamais: le ce valeur sera toujours une référence à l'objet head lorsque sa fonction hôte est encapsulée dans une autre fonction ou appelée dans le contexte d'une autre fonction (là encore, cela est corrigé dans ECMAScript 5).


Contournement du problème de fonction imbriquée en utilisant la chaîne d'étendue

De sorte que la ce la valeur ne soit pas perdue, vous pouvez simplement utiliser la chaîne de la portée pour conserver une référence à ce dans la fonction parent. L'exemple suivant montre comment, à l'aide d'une variable appelée cette, et en tirant parti de sa portée, nous pouvons mieux suivre le contexte de la fonction.

Échantillon: sample104.html

 

Contrôler la valeur de ce En utilisant appel() ou appliquer()

La valeur de ce est normalement déterminé à partir du contexte dans lequel une fonction est appelée (sauf lorsque le nouveau mot-clé est utilisé plus à ce sujet dans une minute), mais vous pouvez écraser et contrôler la valeur de ce en utilisant appliquer() ou appel() définir quel objet ce pointe vers lors de l'appel d'une fonction. Utiliser ces méthodes revient à dire: "Hé, appelle la fonction X mais indique à la fonction d’utiliser un objet Z comme valeur pour ce."Ce faisant, la manière par défaut avec laquelle JavaScript détermine la valeur de ce est annulé.

Dans l'exemple suivant, nous créons un objet et une fonction. Nous appelons ensuite la fonction via appel() de sorte que la valeur de ce à l'intérieur de la fonction utilise monObjet comme son contexte. Les déclarations à l'intérieur du ma fonction la fonction sera alors peuplée monObjet avec des propriétés au lieu de remplir l'objet principal. Nous avons modifié l'objet auquel ce (à l'intérieur de ma fonction) fait référence.

Échantillon: sample105.html

 

Dans l'exemple précédent, nous avons utilisé appel(), mais appliquer() pourrait être utilisé aussi bien. La différence entre les deux réside dans la manière dont les paramètres de la fonction sont passés. En utilisant appel(), les paramètres sont juste des valeurs séparées par des virgules. En utilisant appliquer(), les valeurs de paramètre sont passées à l'intérieur d'un tableau, comme indiqué dans l'exemple suivant.

Échantillon: sample106.html

 

Ce que vous devez apprendre ici, c’est que vous pouvez remplacer la façon par laquelle JavaScript détermine la valeur de ce dans la portée d'une fonction.


En utilisant le ce Mot-clé dans une fonction constructeur définie par l'utilisateur

Lorsqu'une fonction est appelée avec le Nouveau mot-clé, la valeur de ce comme indiqué dans le constructeur se réfère à l'instance elle-même. En d'autres termes: dans la fonction constructeur, nous pouvons exploiter l'objet via ce avant que l'objet soit réellement créé. Dans ce cas, la valeur par défaut de ce changements d'une manière similaire à l'utilisation appel() ou appliquer().

Dans l'exemple suivant, nous avons créé un La personne fonction constructeur qui utilise ce faire référence à un objet en cours de création. Quand une instance de La personne est créé, Ce nom référencera le nouvel objet créé et placera une propriété appelée name dans le nouvel objet avec une valeur du paramètre (prénom) passé à la fonction constructeur.

Échantillon: sample107.html

 

Encore, ce fait référence à "l'objet qui doit être" lorsque la fonction constructeur est appelée à l'aide de la commande Nouveau mot-clé. Si nous n'avions pas utilisé le Nouveau mot-clé, la valeur de ce serait le contexte dans lequel La personne est appelé - dans ce cas, l'objet principal. Examinons le scénario suivant:

Échantillon: sample108.html

 

Le mot clé ce Dans une méthode de prototype se réfère à une instance de constructeur

Lorsqu'il est utilisé dans des fonctions ajoutées à des constructeurs prototype propriété, ce fait référence à l'instance sur laquelle la méthode est appelée. Disons que nous avons une coutume La personne() fonction constructeur. En tant que paramètre, il nécessite le nom complet de la personne. Si nous devons accéder au nom complet de la personne, nous ajoutons un whatIsMyFullName méthode à la Person.prototype pour que tout La personne les instances héritent de la méthode. Lors de l'utilisation ce, la méthode peut faire référence à l'instance qui l'invoque (et donc à ses propriétés).

Ici, je montre la création de deux La personne objets (Cody et Lisa) et l'héritage whatIsMyFullName méthode qui contient le mot-clé this pour accéder à l'instance.

Échantillon: sample109.html

 

Conclusion

Le concept à emporter ici est cette le mot clé this est utilisé pour faire référence à des instances lorsqu'il est utilisé à l'intérieur d'une méthode contenue dans le prototype objet. Si l'instance ne contient pas la propriété, la recherche de prototype commence.

Si l'instance ou l'objet pointé par ce ne contient pas la propriété référencée, les mêmes règles qui s'appliquent à toutes les recherches de propriétés sont appliquées et la propriété sera "recherchée" sur la chaîne de prototypes. Donc, dans notre exemple, si le nom complet la propriété n'a pas été contenue dans notre instance, nom complet serait recherché à Person.prototype.fullName, puis Object.prototype.fullName.