Illustration de ce mot-clé dans les astuces JavaScript_javascript

JavaScript est un langage de script qui prend en charge des fonctionnalités avancées telles que la programmation fonctionnelle, les fermetures et l'héritage basé sur des prototypes. JavaScript semble être facile à utiliser au début, mais au fur et à mesure que vous l'utiliserez plus en profondeur, vous constaterez que JavaScript est en fait très difficile à maîtriser et que certains concepts de base prêtent à confusion. Parmi eux, le mot-clé this en JavaScript est un concept relativement déroutant. Dans différents scénarios, il sera transformé en différents objets. Il existe une opinion selon laquelle ce n'est qu'en maîtrisant correctement le mot-clé this en JavaScript que vous pourrez saisir le seuil du langage JavaScript. Dans les langages orientés objet traditionnels (tels que Java, C#, etc.), la signification de ceci est claire et spécifique, c'est-à-dire qu'elle pointe vers l'objet actuel. Généralement lié au moment de la compilation. En JavaScript, ceci est lié au moment de l'exécution. C'est la raison essentielle pour laquelle le mot-clé this en JavaScript a plusieurs significations.

En raison de la nature de la liaison JavaScript au moment de l'exécution, il peut s'agir en JavaScript de l'objet global, de l'objet actuel ou de n'importe quel objet. Tout dépend de la manière dont la fonction est appelée. Il existe plusieurs manières d'appeler des fonctions en JavaScript : en tant que méthode objet, en tant que fonction, en tant que constructeur et en utilisant apply ou call. Comme le dit le proverbe, les mots ne valent pas les mots, et les expressions ne valent pas les images. Afin de mieux comprendre à quel JavaScript cela renvoie ? Utilisons une image pour expliquer :

J'appelle l'image ci-dessus "JavaScript cet arbre de décision" (en mode non strict). Ce qui suit utilise un exemple pour illustrer comment cette image peut nous aider à juger cela :

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 this.x = this.x + x; 
 this.y = this.y + y; 
  } 
 };
 //决策树解释：point.moveTo(1,1)函数不是new进行调用，进入否决策，
 //是用dot(.)进行调用，则指向.moveTo之前的调用对象，即point
 point.moveTo(1,1); //this 绑定到当前对象,即point对象

Le processus de décision de la fonction point.moveTo() dans "JavaScript cet arbre de décision" est le suivant :

1) La fonction point.moveTo est-elle appelée en utilisant new ? Ce n'est évidemment pas le cas. Allez dans la branche "Non", c'est-à-dire que la fonction est appelée avec un point(.) ? ;

2) La fonction point.moveTo est appelée en utilisant dot(.), c'est-à-dire qu'elle entre dans la branche "oui", c'est-à-dire qu'elle pointe ici vers le point objet précédent dans point.moveTo;

Le diagramme analytique illustrant ce que cela pointe dans la fonction point.moveTo est le suivant :

Pour un autre exemple, regardez le code suivant :

function func(x) { 
 this.x = x; 
 } 
func(5); //this是全局对象window，x为全局变量
 //决策树解析：func()函数是用new进行调用的么？为否，进入func()函数是用dot进行调用的么？为否，则 this指向全局对象window
 x;//x => 5

　Le processus de prise de décision de la fonction func() dans "

JavaScript cet arbre de décision" est le suivant :

1) La fonction func(5) est-elle appelée en utilisant new ? Ce n'est évidemment pas le cas. Allez dans la branche "Non", c'est-à-dire que la fonction est appelée avec un point(.) ? ;

2) La fonction func(5) n'est pas appelée avec point(.), c'est-à-dire qu'elle entre dans la branche "Non", c'est-à-dire qu'elle pointe ici vers la variable globale window, alors this.x est en fait window .x;

Le diagramme analytique illustrant ce que cela indique dans la fonction func est le suivant :

Pour l’appel direct en fonction, regardons un exemple complexe :

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 // 内部函数
 var moveX = function(x) { 
 this.x = x;//this 指向什么？window
 }; 
 // 内部函数
 var moveY = function(y) { 
 this.y = y;//this 指向什么？window
 }; 
  moveX(x); 
  moveY(y); 
 } 
 }; 
 point.moveTo(1,1); 
 point.x; //=>0 
 point.y; //=>0 
 x; //=>1 
 y; //=>1

La fonction point.moveTo(1,1) appelle en fait les fonctions moveX() et moveY() en interne. Le this à l'intérieur de la fonction moveX() est déterminé dans le "

JavaScript cet arbre de décision". Le processus est le suivant :

1) La fonction moveX(1) est-elle appelée en utilisant new ? Ce n'est évidemment pas le cas. Allez dans la branche "Non", c'est-à-dire que la fonction est appelée avec un point(.) ? ;

2) La fonction moveX(1) n'est pas appelée avec point(.), c'est-à-dire qu'elle entre dans la branche "Non", c'est-à-dire que ceci pointe ici vers la variable globale window, alors this.x est en fait window .x;

Regardons un exemple d'appel d'un constructeur :

 function Point(x,y){ 
  this.x = x; // this ?
  this.y = y; // this ?
 }
 var np=new Point(1,1);
 np.x;//1
 var p=Point(2,2);
 p.x;//error, p是一个空对象undefined
 window.x;//2

Le processus de la fonction Point(1,1) jugeant cela dans var np=new Point(1,1) dans le "

JavaScript cet arbre de décision" est le suivant :

1) L'appel à var np=new Point(1,1) utilise-t-il new ? Il s'agit évidemment d'entrer dans la branche "oui", c'est-à-dire que cela pointe vers np

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

;

Le processus de la fonction Point(2,2) déterminant cela dans var p= Point(2,2) dans le "

JavaScript cet arbre de décision" est le suivant :

1) L'appel à var p= Point(2,2) utilise-t-il new ? Ce n'est évidemment pas le cas. Allez dans la branche "Non", c'est-à-dire que la fonction est appelée avec un point(.) ? ;

2) La fonction Point(2,2) n'est pas appelée avec dot(.) ? Si le jugement est non, il entre dans la branche "Non", c'est-à-dire que ceci pointe ici vers la variable globale window, alors this.x est en fait window.x;

3) this.x=2 signifie window.x=2.

Enfin, jetons un coup d'œil à un exemple de fonction appelée à l'aide de call and apply :

 function Point(x, y){ 
 this.x = x; 
 this.y = y; 
 this.moveTo = function(x, y){ 
  this.x = x; 
   this.y = y; 
 } 
 } 
 
 var p1 = new Point(0, 0); 
 var p2 = {x: 0, y: 0}; 
 p1.moveTo.apply(p2, [10, 10]);//apply实际上为p2.moveTo(10,10)
 p2.x//10

Le processus de la fonction p1.moveTo.apply(p2,[10,10]) dans "JavaScript cet arbre de décision" est le suivant :

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

1) La fonction p2.moveTo(10,10) est-elle appelée en utilisant new ? Ce n'est évidemment pas le cas. Allez dans la branche "Non", c'est-à-dire que la fonction est appelée avec un point(.) ? ;

2) La fonction p2.moveTo(10,10) est appelée avec point(.), c'est-à-dire qu'elle entre dans la branche "oui", c'est-à-dire qu'elle pointe ici vers l'objet précédent p2 dans p2.moveTo( 10,10). , donc p2.x=10;

Concernant le processus de l'environnement d'exécution des fonctions JavaScript, il existe une très bonne description dans la bibliothèque de documents IBM Developerworks. L'extrait est le suivant :

　"Une fonction en JavaScript peut être exécutée comme une fonction ordinaire ou comme une méthode d'un objet. C'est la principale raison pour laquelle cela a une signification si riche. Lorsqu'une fonction est exécutée, un environnement d'exécution (ExecutionContext) sera créé, tout le comportement de la fonction se produit dans cet environnement d'exécution. Lors de la construction de l'environnement d'exécution, JavaScript créera d'abord la variable arguments, qui contient les paramètres transmis lors de l'appel de la fonction. Ensuite, il créera la chaîne de portée et l'initialisera d'abord. Liste des paramètres formels de la fonction, la valeur est la valeur correspondante dans la variable arguments. S'il n'y a pas de valeur correspondante dans la variable arguments, le paramètre formel est initialisé à non défini. Si la fonction contient des fonctions internes, ces fonctions internes sont initialisées. Sinon, continuez l'initialisation. Pour les variables locales définies dans cette fonction, il convient de noter que ces variables sont initialisées à undefined à ce moment-là, et leurs opérations d'affectation ne seront exécutées qu'après l'exécution de la fonction après l'environnement d'exécution (ExecutionContext). ) est créé avec succès. C'est très important pour nous de comprendre le rôle des variables en JavaScript. Compte tenu de l'espace, nous n'aborderons pas ce sujet ici. Enfin, attribuez une valeur à cette variable. mentionné ci-dessus, il sera attribué à cet objet global, à cet objet actuel, etc. selon que la méthode d'appel de la fonction (jusqu'à présent) est créée avec succès, la fonction commence à s'exécuter ligne par ligne et les variables requises sont créées. lu à partir de l'environnement d'exécution précédemment construit (ExecutionContext) »

.

Comprendre ce paragraphe sera très utile pour comprendre les fonctions Javascript.

Ce qui précède est une introduction détaillée au mot-clé this en JavaScript. Généralement, les images sont plus faciles à comprendre que le texte. J'espère que cet article sera utile à l'apprentissage de chacun.