Compréhension approfondie de la portée de ceci dans les compétences Javascript_javascript

Tout le monde est souvent confus par ce type lorsqu'il utilise Javascript. Pour la plupart des développeurs ayant une expérience en développement POO, il s'agit d'un identifiant qui fait référence à des éléments ordinaires dans la portée actuelle, mais en Javascript, cela semble étrange car il n'est pas corrigé, mais change avec lui en raison des changements dans l'environnement d'exécution. En Javascript, cela pointe toujours vers l'objet sur lequel sa méthode est appelée.

Donnez un exemple simple :

Copier le code Le code est le suivant :

fonction test(){
alerte(ce);
>
var obj=fonction(){
var nom='testObj';
>
obj.objTest=test;
test();
obj.objTest();

Mettez ce code en HTML et exécutez cette page. Vous verrez d'abord un avertissement [fenêtre d'objet], puis un deuxième avertissement.

Copier le code Le code est le suivant :

var obj=fonction(){
var nom='testObj';
>

Nous avons d'abord défini une méthode test() et appelé la méthode alert() à l'intérieur de la méthode pour l'afficher. Ensuite, nous avons défini un objet fonction obj, y avons ajouté un nom de champ privé et ajouté une méthode statique objTest(). est créé et cette fonction pointe directement vers la fonction test().

Appelez respectivement les méthodes test() et obj.objTest(). La première boîte d'avertissement affiche l'objet Window et la deuxième invite est le code de la fonction obj que nous avons définie. Cela montre que la valeur de this est différente lorsque la fonction de test est exécutée deux fois !

Cela montre que lorsque l'objet appelant la fonction est différent, l'objet référencé par le mot-clé interne this est différent. Il convient de noter ici que Javascript est un langage basé sur les objets. Lorsque nos variables ou fonctions sont définies sous la racine de la balise <script></script> Ainsi, lorsque nous utilisons le code de la fonction test(){} pour définir une fonction, cela équivaut en fait à ajouter une nouvelle fonction à l'objet window, à savoir la fonction window.test().

On peut faire une expérience :

Copier le code Le code est le suivant :

fonction test(){
alerte(ce);
>
alert(test===window.test);

La boîte d'avertissement sera vraie, ce qui signifie que lorsque nous appelons la fonction test(), nous équivalons à appeler window.test(). Ainsi, lorsque nous appelons la fonction test(), l'objet qui appelle cette fonction est en fait l'objet window, et cela fait référence à l'objet window, donc le contenu de la fenêtre d'avertissement qui apparaît lorsque nous alertons(this) est [object Window ]. Nous définissons obj.objTest=test ce qui équivaut à pointer obj.objTest() vers test(), donc lorsque nous appelons la fonction obj.objTest(), cela équivaut à appeler la fonction test() dans obj, alors maintenant ceci fait référence à l'objet obj, ce qui est demandé est la fonction de obj, qui est le code que nous voyons.

Cela devrait être presque suffisamment expliqué. Peut-être que l'exemple ci-dessus est trop abstrait et je ne peux pas imaginer les circonstances dans lesquelles il peut être utilisé. Supposons donc une exigence maintenant et faisons un exemple plus pratique.

Supposons que la couleur de tous les hyperliens de notre page actuelle soit changée en rouge après avoir cliqué, et cela est implémenté à l'aide de Javascript. L'idée générale devrait être d'obtenir toutes les balises de la page, puis de parcourir toutes les balises et d'enregistrer un événement de clic pour chacune d'elles. Une fois l'événement déclenché, nous définissons sa valeur de couleur sur rouge. .

L'exemple de code est le suivant :

Copier le code Le code est le suivant :

//Changer de couleur
fonction changeColor(){
this.style.color='#f00';
>
//Initialiser, enregistrer les événements pour toutes les balises
fonction init(){
var customLinks=document.getElementsByTagName('a');
pour (je dans customLinks){
//Vous pouvez également utiliser des écouteurs d'événements pour enregistrer des événements
//En raison de la compatibilité avec IE, FF et d'autres navigateurs, plus de code peut être nécessaire, vous pouvez l'écrire vous-même
customLinks[i].onclick=changeColor;
>
>
window.onload=init;

Ajoutez ce code au document HTML et ajoutez des hyperliens au document. Lorsque vous cliquez sur le lien hypertexte, la couleur devient rouge. Le mot-clé this dans la fonction changeColor() que nous avons défini ici est déclenché lorsque vous cliquez sur le lien hypertexte. fonction, il fait référence au lien hypertexte actuel. Et si vous appelez directement la fonction changeColor(), le navigateur signalera une erreur, provoquant une erreur telle que Erreur : « this.style » est nul ou n'est pas un objet ou n'est pas défini.

Je me demande si cela peut vous permettre, à vous qui lisez l'article, de comprendre le mot-clé this en Javascript ? Ou êtes-vous impatient ? (:P)

En fait, si vous voulez vraiment avoir une compréhension plus approfondie de ce problème, vous devez avoir une compréhension approfondie de la portée et de la chaîne de portée de Javascript.

La portée, comme son nom l'indique, fait référence à l'espace de code auquel un certain attribut ou méthode dispose d'autorisations d'accès. En termes simples, il s'agit de la portée d'application de cette variable ou de cette méthode dans le code. Dans la plupart des POO, il existe trois domaines principaux : public, privé et protection. Je n'expliquerai pas les trois domaines en détail ici. Si vous avez une expérience en POO, vous devriez en avoir une compréhension approfondie. Ce que je veux dire ici, c'est que ces trois types de portée n'ont presque aucun sens pour Javascript, car il n'y a qu'une seule portée publique en Javascript et les portées en Javascript sont conservées dans les fonctions. Par exemple :

Copier le code Le code est le suivant :

var test1='variable globale';
exemple de fonction(){
var test2='exemple de variable';
alerte(test1);
alerte(test2);
>
exemple();
alerte(test1);
alerte(test2);

Selon ce que nous avons expliqué plus tôt, la variable test1 ici est équivalente à un attribut de window, elle fonctionnera donc dans toute la portée de la fenêtre, tandis que test2 est déclarée dans la fonction example(), donc sa portée est maintenue à l'intérieur du example(), si le navigateur test2 est appelé en dehors de la fonction, une erreur sera demandée. Il n’y a aucun problème pour appeler test1 dans example().

Sur cette base, donnons un autre exemple :

Copier le code Le code est le suivant :

var test='variable globale';
exemple de fonction(){
var test='exemple de variable';
>
exemple();
alerte(test);

Quel sera le résultat de l’exécution de cet exemple ? Oui, la boîte d'avertissement affichera "variable globle" car la portée de la variable de test à l'intérieur de la fonction example() reste uniquement interne et n'affectera pas la variable de test externe. Et si nous supprimions le mot-clé var de la variable de test dans example() ? Vous pouvez l'essayer vous-même.

En parlant de cela, un autre concept entre en jeu, à savoir le concept de chaîne de portée. Une chaîne de portées est un chemin par lequel la valeur d'une variable peut être déterminée. Comme le montre l'exemple ci-dessus, le mot-clé var est utilisé pour maintenir la chaîne de portées. Si une variable est déclarée à l'aide du mot-clé var, elle peut être considérée comme le point final de la chaîne de portées. La définition des paramètres formels de la même fonction jouera également un rôle similaire.

En parlant de ça, avez-vous une compréhension plus claire de ce type bizarre ? Selon son interprétation simple, cela pointe toujours vers l'objet qui appelle la fonction dans laquelle il se trouve. En fonction de la portée et de la chaîne de portée, nous en déterminerons clairement le vrai visage. Pour terminer, voici une simple variation de l'exemple du début :

Copier le code Le code est le suivant :

fonction test(){
alerte(ce);
>
var obj=fonction(){
var nom='testObj';
>
obj.objTest=test;
obj.objTest2=fonction(){
test();
>
test();
obj.objTest();
obj.objTest2();

Que pensez-vous que cela va vous demander ? Vous pouvez essayer de l'exécuter (:P);

Puisque cela change en fonction du changement de l'objet qui appelle sa fonction, pouvons-nous changer de force son objet appelant ? La réponse est oui. Les prochains articles présenteront cette partie, ainsi que l'implémentation de différents types de données membres en Javascript, les fermetures et d'autres concepts.

Écrire certaines de mes expériences et idées dans le processus d'apprentissage, ce n'est pas seulement partager avec tout le monde, mais aussi examiner mes propres lacunes. S'il y a des problèmes dans mon écriture, veuillez me critiquer et me donner des conseils. Merci beaucoup. beaucoup!