Compréhension flexible de ce pointeur dans les compétences JavaScript_javascript

C'est l'un des mots-clés en JavaScript. Il est souvent utilisé lors de l'écriture de programmes. Il est particulièrement important de comprendre et d'utiliser correctement le mot-clé this. Tout d'abord, il faut dire que l'intérêt de ceci ne peut pas être déterminé lorsque la fonction est définie. Ce n'est que lorsque la fonction est exécutée que l'on peut déterminer vers qui elle pointe. En fait, cela pointe finalement vers l'objet qui l'appelle (. cette phrase est un peu un problème, j'expliquerai pourquoi il y a un problème plus tard. Bien que la plupart des articles sur Internet le disent, même si dans de nombreux cas, il n'y aura aucun problème si vous le comprenez de cette façon, en fait, ce n'est pas exact de comprendre. de cette façon, donc avant de comprendre, vous aurez le sentiment de ne pas pouvoir comprendre cela), je vais donc explorer cette question en profondeur ensuite.

Pourquoi devriez-vous apprendre cela ? Si vous avez étudié la programmation fonctionnelle ou la programmation orientée objet, alors vous savez certainement à quoi elle sert. Si vous ne l'avez pas étudié, vous n'avez pas besoin de lire cet article pour le moment, vous pouvez également le lire. si cela vous intéresse. Après tout, c'est js. Quelque chose qui doit être maîtrisé.

Exemple 1 :

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this); //Window
}
a();

Comme nous l'avons dit plus haut, cela pointe finalement vers l'objet qui l'appelle , la fonction a ici est en fait signalée par l'objet Window, comme peut le prouver le code suivant.

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);　　//Window
}
window.a();

C'est le même que le code ci-dessus. En fait, l'alerte est également un attribut de fenêtre et est également cliqué par fenêtre.

Exemple 2 :

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();

Ceci pointe ici vers l'objet o, parce que vous appelez cela fn C'est exécuté via o.fn(), donc le point naturel est l'objet o. Permettez-moi de souligner encore une fois que le point de ceci ne peut pas être déterminé lorsque la fonction est créée. Il ne peut être déterminé que lorsqu'il est appelé. à cela. Pour comprendre cela.

En fait, l'exemple 1 et l'exemple 2 ne sont pas assez précis. L'exemple suivant peut renverser la théorie ci-dessus.

Si vous voulez bien comprendre cela, vous devez lire les quelques exemples suivants

Exemple 3 :

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();

Ce code est presque le même que le code ci-dessus, mais pourquoi cela ne pointe-t-il pas ici la fenêtre si selon la théorie ci-dessus, cela pointe finalement vers l'objet qui l'appelle, ici ? Permettez-moi de commencer par dire quelque chose de plus. Window est un objet global dans js. Les variables que nous créons ajoutent en fait des attributs à window, nous pouvons donc utiliser l'objet window dot o ici.

N'expliquons pas pourquoi ceci dans le code ci-dessus ne pointe pas vers la fenêtre. Regardons un morceau de code.

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();

L'objet o est également cliqué ici, mais cela ne l'exécute pas non plus. Ensuite, vous direz certainement ce que j'ai dit au. début Tout cela n'est-il pas faux ? En fait, ce n'est pas le cas, c'est juste que ce que j'ai dit au début était inexact. Ensuite, j'ajouterai une phrase, je pense que vous pouvez parfaitement comprendre le problème soulevé par cela.

Cas 1 : S'il y a this dans une fonction, mais qu'elle n'est pas appelée par l'objet de niveau supérieur, alors cela pointe vers la fenêtre. Ce qu'il faut expliquer ici, c'est cela dans le strict. version de js, cela ne pointe pas vers window, mais nous ne discuterons pas ici de la version stricte. Si vous voulez en savoir plus, vous pouvez effectuer une recherche en ligne.

Cas 2 : S'il y a ceci dans une fonction et que cette fonction est appelée par l'objet de niveau supérieur, alors cela pointe vers l'objet de niveau supérieur.

Cas 3 : S'il y a ceci dans une fonction, cette fonction contient plusieurs objets. Bien que cette fonction soit appelée par l'objet le plus externe, cela ne pointe que vers son niveau supérieur, l'exemple 3 peut le prouver. Si vous n'y croyez pas, continuons à examiner quelques exemples.

var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();

Bien qu'il n'y ait pas d'attribut a dans l'objet b, ceci pointe également vers l'objet b, car cela ne pointera que vers son sommet objet de niveau, qu'il y ait ou non quelque chose que cela veut dans cet objet.

Il existe un autre cas particulier, exemple 4 :

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();

Ici, cela pointe vers window , êtes-vous un peu confus ? En fait, c’est parce que vous n’avez pas compris une phrase, ce qui est également crucial.

Cela pointe toujours vers l'objet qui l'a appelé en dernier, c'est-à-dire qui l'a appelé lors de son exécution. Dans l'exemple 4, bien que la fonction fn soit référencée par l'objet b, lorsqu'une valeur est attribuée à fn. Lorsque la variable j est donnée, elle n'est pas exécutée, elle pointe donc finalement vers window. Ceci est différent de l'exemple 3, qui exécute directement fn.

C'est en fait la même chose, mais cela indiquera quelque chose de différent dans différentes situations. Il y a quelques petites erreurs dans le résumé ci-dessus, et cela ne peut pas être considéré comme une erreur, mais le. La situation sera différente selon les environnements, donc je ne peux pas l'expliquer clairement d'un coup, vous ne pouvez en faire l'expérience que lentement.

Version constructeur de ceci :

function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

La raison pour laquelle l'objet a peut signaler l'utilisateur dans la fonction Fn est que le nouveau mot-clé peut changer le point de ceci et pointer ceci vers l'objet a. Pourquoi est-ce que je dis que a est un objet Parce que l'utilisation du nouveau mot-clé est ? pour créer un objet. Instance d'objet. Pour comprendre cette phrase, vous pouvez penser à notre exemple 3. Ici, nous créons une instance de Fn en utilisant la variable a (équivalent à copier une copie de Fn dans l'objet a). uniquement créé et non exécuté. L'objet qui appelle cette fonction Fn est l'objet a, donc cela pointe naturellement vers l'objet, alors pourquoi y a-t-il un utilisateur dans l'objet Fn Parce que vous avez copié une copie de la fonction Fn sur l'objet a et que vous l'utilisez ? le nouveau mot-clé équivaut à copier celui commandé.

En plus de ce qui précède, nous pouvons également modifier le point de ceci par nous-mêmes. Concernant la modification du point de ceci par nous-mêmes, veuillez consulter le résumé des méthodes d'appel, d'application et de liaison en JavaScript. . Cet article explique en détail comment modifier manuellement le pointeur de ceci.

Ce qui précède est le contenu d'une compréhension flexible de cela pointant vers les compétences _javascript en JavaScript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !