Introduction détaillée à JavaScript : à quoi cela correspond-il exactement ? (images et texte)

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. Ceci en JavaScript est lié au moment de l'exécution, ce qui est la raison essentielle pour laquelle le mot-clé this en JavaScript a plusieurs significations.

JavaScript en raison de sa fonctionnalité de liaison au moment de l'exécution, cela en JavaScript peut être l'objet global, l'objet actuel ou n'importe quel objet , tout dépend de la façon 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 ? Ce qui suit est une image pour expliquer :

J'appelle l'image ci-dessus "JavaScript cet arbre de décision" (en mode non strict). Voici un exemple pour illustrer comment ce diagramme nous aide à 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对象

la fonction point.moveTo() détermine le processus dans "JavaScript cet arbre de décision" Comme ceci :

1) L'appel de la fonction point.moveTo 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.moveTo est appelée avec point(.), 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 d'analyse 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 détermination de la fonction func() dans "JavaScript cet arbre de décision" est le suivant :

1) La fonction func(5) est-elle appelée utiliser du neuf ? 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 que ceci pointe ici vers la fenêtre de variable globale, puis ceci. x est en fait window.x ;

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

Pour la méthode de direct appelant en tant que fonction, regardons un exemple compliqué : la fonction

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

point.moveTo(1,1) appelle en fait les fonctions moveX() et moveY() en interne. la fonction est dans "JavaScript cet arbre de décision. Le processus de jugement dans " est le suivant :

1) L'appel de fonction moveX(1) 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 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 fenêtre de variable globale, puis ceci. x est en fait window.x ;

Ce qui suit est 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

Fonction Point(1,1) dans var np=new Point(1,1) ceci dans "JavaScript cet arbre de décision"Le processus de prise 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

Point; (2,2) fonction Le processus de détermination de ceci dans var p= Point(2,2) dans "JavaScript cet arbre de décision" est le suivant :

1) var p= Point (2, 2) L'appel est-il effectué 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(2,2) n'est pas appelée avec dot(.) ? Le jugement est non, c'est-à-dire entrer 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, regardons un exemple de fonction appelée à l'aide de call et 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

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

On sait que les deux méthodes apply et call sont extrêmement puissantes. Elles permettre de changer le contexte d'exécution de la fonction, c'est-à-dire cet objet déterminé par la liaison. 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 en utilisant dot(.), c'est-à-dire qu'elle entre dans la branche "oui", c'est-à-dire qu'elle pointe ici vers p2.moveTo(10 ,10). L'objet précédent p2, donc p2.x=10;

Concernant le processus de l'environnement d'exécution des fonctions JavaScript, il y a une description dans la bibliothèque de documents IBM Developerworks qui semble très bonne. suit :

"Une fonction en JavaScript peut être exécutée comme une fonction ordinaire ou comme une méthode d'un objet. C'est la raison principale pour laquelle cela a une signification si riche. Lorsqu'une fonction est exécutée, une exécution (ExecutionContext) sera créé. Toutes les actions de la fonction se produisent dans cet environnement d'exécution. Lors de la construction de cet environnement d'exécution, JavaScript crée d'abord la variable arguments, qui contient les paramètres transmis lors de l'appel de la fonction. et initialise d'abord la fonction.La liste des paramètres formels 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é à undefined. , ces fonctions internes sont initialisées. Sinon, continuez à initialiser les variables locales définies dans la fonction. A noter que ces variables sont initialisées à undefined à ce moment, et leurs opérations d'affectation ne seront exécutées que lorsque la fonction sera exécutée. exécuté après la création réussie de l'environnement d'exécution (ExecutionContext). C'est important pour nous de comprendre la portée des variables en JavaScript. Compte tenu de l'espace, nous n'aborderons pas ce sujet ici. Enfin, attribuez une valeur à. la variable this. Comme mentionné ci-dessus, elle sera affectée à l'objet global this en fonction de la méthode d'appel de la fonction, de l'objet actuel, etc. À ce stade, l'environnement d'exécution (ExecutionContext) de la fonction est créé avec succès. , et la fonction commence à s'exécuter ligne par ligne, et les variables requises sont lues à partir de l'environnement d'exécution précédemment construit (ExecutionContext). "

Comprendre ce paragraphe contribuera grandement à comprendre les fonctions Javascript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!