Explication détaillée de ce pointeur dans JavaScript

JavaScript est un langage de script qui prend en charge des fonctions avancées telles que la programmation fonctionnelle, les fermetures, l'héritage basé sur les prototypes, etc. JavaScript semble être facile à démarrer au début, mais comme vous l'utilisez en profondeur, il est en fait difficile de maîtriser JavaScript, et certains concepts de base sont incroyables. Parmi eux, le mot-clé ceci en JavaScript est un concept relativement déroutant. Dans différents scénarios, cela deviendra différents objets. Il y a une vue que ce n'est qu'en maîtrisant correctement ce mot-clé dans JavaScript que vous pouvez entrer le seuil de la langue javascript. Dans les langues orientées objet grand public (comme Java, C #, etc.), cela signifie clair et spécifique, c'est-à-dire pointant vers l'objet actuel. Généralement lié pendant la période de compilation. Ceci est lié pendant l'exécution en JavaScript, ce qui est la raison essentielle pour laquelle ce mot-clé a plusieurs significations en JavaScript.

En raison de sa fonction de liaison pendant l'exécution, ceci dans JavaScript peut être un objet global, un objet actuel ou tout objet, qui dépend entièrement de la façon dont la fonction est appelée. Il existe plusieurs façons d'appeler des fonctions en javascript:

Appelé comme méthode objet;

comme appel de fonction;

Appelé comme constructeur;

Utilisez Appliquer ou appeler pour appeler.

Comme le dit le proverbe, un personnage n'est pas aussi bon qu'une forme, et une forme n'est pas aussi bonne qu'une image. Afin de rendre les gens mieux à comprendre à quoi cela montre JavaScript? Voici une image à expliquer:

Dans l'image ci-dessus, je l'appelle "JavaScript cet arbre de décision" (en mode non stricte). Ce qui suit est un exemple pour illustrer comment ce chiffre peut nous aider à juger ceci:

 var point = {x: 0, y: 0, moveTo: function (x, y) {this.x = this.x + x; this.y = this.y + y; }}. // Ceci est lié à l'objet actuel, c'est-à-dire l'objet Point

L'appel de fonction Point.moveto est-il appelé avec nouveau? Ce n'est évidemment pas. En entrant dans la branche "non", c'est-à-dire la fonction appelée avec point (.)? ;

La fonction Point.moveto est appelée avec Dot (.), Autrement dit, il entre dans la branche "Oui", c'est-à-dire que cela pointe ici le point d'objet avant Point.moveto.

Le diagramme d'analyse de ce que ce point dans le point de figure. La fonction Moveto est illustrée dans la figure suivante:

Donnons un autre exemple, examinons le code suivant:

 fonction func (x) {this.x = x; } func (5); // Il s'agit d'une fenêtre d'objet globale, X est une variable globale // Analyse d'arbre de décision: la fonction func () est-elle appelée avec nouveau? Au non, s'appelle-t-il avec DOT lors de la saisie de la fonction func ()? Au non, cela pointe vers l'objet global WindowX; // x => 5

Le processus de détermination de la fonction func () dans "javascript this Dision Tree" est le suivant:

Func (5) est-il appelé avec nouveau? Ce n'est évidemment pas. En entrant dans la branche "non", c'est-à-dire la fonction appelée avec point (.)? ;

La fonction func (5) n'est pas appelée avec Dot (.), C'est-à-dire qu'elle entre dans la branche "non", c'est-à-dire ce point vers la fenêtre de variable globale, alors ce.x est en fait Window.x.

Le diagramme d'analyse de ce à quoi cette fonction FUNC pointe est illustré dans la figure suivante:

Pour la méthode d'appel directement en fonction, voyons un exemple complexe:

 var point = {x: 0, y: 0, moveTo: function (x, y) {// function intérieure var movex = function (x) {this.x = x; // Qu'est-ce que cela indique? fenêtre }; // la fonction interne var movey = function (y) {this.y = y; // Qu'est-ce que cela indique? fenêtre }; movex (x); Movey (y); }}; point.moveto (1,1); Point.x; // => 0 point.y; // => 0 x; // => 1 y; // => 1

L'appel interne réel des fonctions MoveX () et Movey (). Le processus de détermination de cela à l'intérieur de la fonction Movex () dans le "JavaScript Cet arborescence de décision" est le suivant:

L'appel de fonction MoveX (1) est-il appelé avec nouveau? Ce n'est évidemment pas. En entrant dans la branche "non", c'est-à-dire la fonction appelée avec point (.)? ;

La fonction Movex (1) n'est pas appelée avec Dot (.), C'est-à-dire qu'elle entre dans la branche "non", c'est-à-dire que cela pointe ici vers la fenêtre de variable globale, alors ce.x est en fait Window.x.

Jetons un coup d'œil à l'exemple d'un appel de constructeur:

 Point de fonction (x, y) {this.x = x; // ce ? this.y = y; // this?} var np = nouveau point (1,1); np.x; // 1var p = point (2,2); px; // Erreur, P est un objet vide UndefinedWindow.x; // 2

Le processus de détermination de cela dans la fonction "JavaScript This Discige Tree" dans la fonction Point (1,1) est la suivante:

var np = new est le point (1,1) appel appelé avec new? C'est évidemment, entrant dans la branche "oui", c'est-à-dire que cela pointe vers NP;

Alors this.x = 1, c'est-à-dire np.x = 1;

Le processus de détermination de cela dans la "JavaScript this Decision Tree" de la fonction Point (2,2) dans var p = point (2,2) est la suivante:

L'appel var p = point (2,2) est-il appelé avec nouveau? Ce n'est évidemment pas. En entrant dans la branche "non", c'est-à-dire la fonction appelée avec point (.)? ;

La fonction Point (2,2) n'est-elle pas appelée avec DOT (.)? Déterminé comme non, c'est-à-dire entrez la branche "non", c'est-à-dire que cela pointe ici vers la fenêtre de variable globale, alors ce.x est en fait Window.x;

This.x = 2 signifie fenêtre.x = 2.

Enfin, jetons un coup d'œil à l'exemple des fonctions d'appel avec appel et appliquez:

 Point de fonction (x, y) {this.x = x; this.y = y; this.moveto = fonction (x, y) {this.x = x; this.y = y; }} var p1 = nouveau point (0, 0); var p2 = {x: 0, y: 0}; p1.moveto.apply (p2, [10, 10]); // s'appliquer est en fait p2.moveto (10, 10) p2.x // 10

Le processus de détermination de la fonction P1.Moveto.Apply (P2, [10,10]) dans le "JavaScript Cet arbre de décision" est le suivant:

Nous savons que les deux méthodes s'appliquent et l'appel sont extrêmement puissantes, et ils permettent de changer le contexte de l'exécution de la fonction, c'est-à-dire l'objet lié à cela. p1.moveto.apply (p2, [10,10]) est en fait p2.moveto (10,10). Alors p2.moveto (10,10) peut être interprété comme:

L'appel de fonction est-il appelé avec nouveau? Ce n'est évidemment pas. En entrant dans la branche "non", c'est-à-dire la fonction appelée avec point (.)? ;

La fonction p2.moveto (10,10) est appelée avec point (.), avant, donc p2.x = 10.

En ce qui concerne le processus de l'environnement d'exécution de la fonction JavaScript, une description de la bibliothèque de documents IBM DeveloperWorks est très bien, et l'extrait est le suivant:

 "Les fonctions en JavaScript peuvent être exécutées en fonction des fonctions ordinaires ou en tant qu'objets, ce qui est la principale raison pour laquelle cela est si riche. Lorsqu'une fonction est exécutée, un environnement d'exécution (exécution Conclusion) est créé, et tous les comportements de la fonction se produisent dans cet environnement d'exécution. Lors de la création de l'environnement d'exécution, Javascript d'abord, la variable des arguments sera ensuite créée. Variable, initialisez d'abord le tableau des paramètres formels de la fonction, la valeur correspondante dans la variable des arguments. Leur opération d'attribution ne sera exécutée que lorsque la fonction est exécutée après l'environnement d'exécution (ExecutionConted) est créée avec succès. Créé avec succès et la fonction commence à exécuter la ligne par ligne, et les variables requises sont lues à partir de l'environnement d'exécution (ExecutionContex) qui a été construit auparavant.

Comprendre ce passage sera très avantageux pour comprendre les fonctions JavaScript.