Lors de l'utilisation de JavaScript, les gens sont souvent confus par ce type. Pour la plupart des développeurs ayant une expérience de développement OOP, il s'agit d'un identifiant qui fait référence aux éléments ordinaires dans la portée actuelle, mais en JavaScript, il semble excentrique car il n'est pas fixe, mais change à mesure que son environnement d'exécution change. Dans JavaScript, cela pointe toujours vers l'objet qui appelle la méthode qu'il est située.
Donnons un exemple simple:
La copie de code est la suivante:
fonction test () {
alerte (ceci);
}
var obj = fonction () {
var name = 'testoBj';
}
obj.objtest = test;
test();
obj.objtest ();
Mettez ce code dans HTML et exécutez cette page, vous verrez d'abord un avertissement [fenêtre d'objet], puis un avertissement.
La copie de code est la suivante:
var obj = fonction () {
var name = 'testoBj';
}
Nous définissons d'abord une méthode Test (), appelons la méthode alert () à l'intérieur de la méthode pour l'afficher, puis définissons un objet de fonction OBJ, ajoutez un nom de champ privé à lui et ajoutez une méthode statique objTest (), et cette fonction pointe directement à la fonction test ().
Les méthodes test () et obj.objtest () sont appelées respectivement. La première boîte d'alerte invite 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 ceci 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 mentionné par ce mot-clé à l'intérieur est différent. Il convient de noter ici que JavaScript est une langue basée sur des objets. Lorsque notre définition de variable ou de fonction est à la racine de la balise <cript> </cript>, elle équivaut en fait à l'ajout de propriétés ou de méthodes correspondantes à l'objet Window. Par conséquent, lorsque nous utilisons la fonction Test () {} code pour définir une fonction, il est en fait équivalent à l'ajout d'une nouvelle fonction à l'objet Window, à savoir la fonction Window.Test ().
Nous pouvons faire une expérience:
La copie de code est la suivante:
fonction test () {
alerte (ceci);
}
alert (test === window.test);
La boîte d'alerte invite True, ce qui signifie que lorsque nous appelons la fonction Test (), elle équivaut à appeler Window.Test (). Ainsi, lorsque nous appelons la fonction test (), l'objet qui appelle cette fonction est en fait un objet de fenêtre, cela fait référence à un objet de fenêtre, de sorte que le contenu de la fenêtre d'avertissement que nous appartenons lorsque l'alerte (ceci) est [fenêtre d'objet]. Nous pointons obj.objtest = test pour pointer obj.objtest () pour tester (), donc lorsque nous appelons la fonction obj.objtest (), il équivaut à appeler la fonction test () dans obj. Alors maintenant, cela fait référence à l'objet OBJ, et l'invite est la fonction OBJ, qui est le code que nous voyons.
En parlant de cela, cela devrait être presque le même. Peut-être que l'exemple ci-dessus est trop abstrait et je ne peux pas imaginer quelles circonstances il peut être utilisé. Supposons donc une exigence et faisons un exemple plus proche de la pratique.
Supposons que tous les hyperliens de notre page doivent maintenant être changés en rouge après avoir cliqué et implémentent en JavaScript. L'idée générale doit être d'obtenir toutes les balises <a> de la page, puis parcourez toutes les balises <a>, enregistrez un événement de clic pour chacun, et une fois l'événement déclenché, nous définissons sa valeur de couleur sur le rouge.
L'exemple de code est le suivant:
La copie de code est la suivante:
// change la couleur
fonction changEColor () {
this.style.color = '# f00';
}
// Initialiser, enregistrer des événements pour toutes les balises
fonction init () {
var customLinks = document.getElementsByTagName ('a');
for (i in CustomLinks) {
// Vous pouvez également utiliser l'auditeur d'événements pour enregistrer des événements
// Parce qu'il peut nécessiter plus de code pour être compatible avec IE, FF et d'autres navigateurs, vous pouvez l'écrire vous-même
COMMUSTLINKS [I] .OnClick = ChangeColor;
}
}
window.onload = init;
Ajoutez ce code au document HTML et ajoutez des hyperliens au document. Lorsque l'hyperlien est cliqué, la couleur deviendra rouge. La fonction ChangeColor () que nous avons définie ici se réfère à l'hyperlien actuel lors de la cliquetis sur l'hyperlien. Si vous appelez directement la fonction ChangeColor (), le navigateur rapportera une erreur et l'erreur est invitée: «this.style» est nul ou non un objet ou non défini.
Je me demande si cela peut faire de vous, qui lisez l'article, vous comprenez ce mot-clé en JavaScript? Ou êtes-vous déjà impatient? (: P)
En fait, afin d'avoir vraiment une compréhension plus approfondie de cette question, vous devez avoir une compréhension plus profonde de la portée et de la chaîne de portée du JavaScript.
La portée, comme son nom l'indique, fait référence à l'espace de code où un certain attribut ou méthode a des droits d'accès. Autrement dit, il s'agit de la portée de l'application de cette variable ou de cette méthode dans le code. Parmi la plupart des OOP, il y a trois portées: public, privé et protégé. Je n'expliquerai pas en détail ici. Si vous avez de l'expérience dans la POO, vous devriez avoir une compréhension approfondie. Ce que je veux dire ici, c'est que ces trois types de portée sont presque dénués de sens pour JavaScript, car il n'y a qu'une seule portée publique en JavaScript, dans laquelle la portée est maintenue dans les fonctions. Par exemple:
La copie de code est la suivante:
var test1 = 'variable Glable';
Exemple de fonction () {
var test2 = 'Exemple variable';
alerte (test1);
alerte (test2);
}
exemple();
alerte (test1);
alerte (test2);
Selon ce que nous avons expliqué précédemment, la variable TEST1 ici équivaut à une propriété de la fenêtre, elle fonctionnera donc dans toute la portée de la fenêtre, tandis que le test2 est déclaré en interne dans la fonction d'exemple (), de sorte que sa portée est maintenue à l'intérieur de la méthode d'exemple (). Si le navigateur Test2 est appelé en dehors de la fonction, une erreur sera invitée. Et appeler test1 à l'intérieur de l'exemple () est très bien.
Sur la base de cela, donnons un autre exemple:
La copie de code est la suivante:
var test = 'variable Glable';
Exemple de fonction () {
var test = 'Exemple variable';
}
exemple();
alerte (test);
Que se passera-t-il si cet exemple fonctionne? Oui, la boîte d'alerte invitera la "variable Glable", car la portée de la variable de test à l'intérieur de la fonction Exemple () n'est maintenue qu'à l'intérieur et n'affectera pas la variable de test externe. Et si nous supprimons le mot clé VAR de la variable de test à l'intérieur de l'exemple ()? Vous pouvez l'essayer vous-même.
En parlant de cela, il y a un autre concept impliqué, c'est-à-dire le concept de chaîne de portée. La chaîne de portée est le chemin qui peut déterminer la valeur d'une variable. Comme on peut le voir à partir de l'exemple ci-dessus, le mot-clé VAR est utilisé pour maintenir la chaîne de portée. Si la variable utilise la déclaration de mots clés VAR, elle peut être considérée comme le point final de la chaîne de portée. La définition des paramètres formels de la même fonction jouera également un rôle similaire.
En parlant de cela, vous avez une compréhension plus claire de ce gars bizarre, non? Selon sa simple interprétation, cela pointe toujours vers l'objet qui appelle la fonction qu'elle est située. Selon la chaîne de portée et de portée, nous déterminerons clairement le vrai visage de cela. À la fin, prenons un simple changement par rapport au début de l'exemple:
La copie de code est la suivante:
fonction test () {
alerte (ceci);
}
var obj = fonction () {
var name = 'testoBj';
}
obj.objtest = test;
obj.objtest2 = fonction () {
test();
}
test();
obj.objtest ();
obj.objtest2 ();
Que supposez-vous inciter? Vous pouvez essayer de courir (: p);
Puisqu'il est modifié en fonction du changement de l'objet qui appelle la fonction dans laquelle il se trouve, pouvons-nous forcer le changement de son objet d'appel? La réponse est oui. Dans les futurs articles, nous présenterons cette partie du contenu, ainsi que les méthodes de mise en œuvre de différents types de membres de données en JavaScript, fermetures et autres concepts.
J'ai écrit certaines de mes expériences et expériences pendant le processus d'apprentissage. Tout d'abord, je peux les partager avec vous et également examiner mes propres lacunes. Si j'ai des questions sur l'écriture, veuillez critiquer et me donner des conseils. Merci beaucoup!