Explorez le mystère de cela en Javascript

Avant-propos : il s'agit d'un mot-clé relativement particulier en JavaScript. Sa large gamme d'applications et ses méthodes flexibles le rendent puissant, mais en même temps il est destiné à être difficile à utiliser . Quand j’ai commencé à l’apprendre, j’étais très confus, j’ai recherché beaucoup d’informations afin de bien le comprendre. Ensuite, j'ai organisé ce que j'ai appris et je l'ai exprimé d'une manière facile à comprendre. Cela peut être utilisé comme notes d'étude et comme référence pour les enfants dans le besoin^_^

Qu'est-ce que c'est ?

La signification de ce mot-clé est claire et spécifique, c'est-à-dire qu'il fait référence à l'objet actuel. Cela signifie que cela n’est vrai que dans certaines circonstances relatives.

ceci est divisé en trois situations : objet global, objet actuel ou n'importe quel objet ; juger dans quelle situation il se trouve dépend entièrement de la façon dont la fonction est appelée. Les principaux appels de fonction en JavaScript ont les méthodes suivantes :

Appelé comme une fonction normale

Appelé comme une méthode objet

Appelé comme un constructeur

Utilisez apply ou call pour appeler

1. Appeler comme une fonction normale

------C'est notre méthode la plus couramment utilisée. Cette méthode d'appel est un appel global, et cela fait ici référence au global. objet

function test(){
 this.a = 5;
 alert(this.a);
 alert(this);
}
test(); // 5 [object Window]

Comme indiqué ci-dessus : pour une fonction définie globalement, le propriétaire de la fonction est la page actuelle, qui est l'objet fenêtre , donc example() L'objet appelant est Window, donc ceci représente ici Window

Une autre façon de l'écrire :

var a = 5;
function test(){
 var a = 10;
 alert(this.a);
}
test(); //5

comme indiqué ci-dessus : une variable a est également déclarée dans la fonction test(), mais le résultat de l'appel à test() est 5, ce qui signifie que cela à l'intérieur de la fonction représente l'objet global, c'est-à-dire Window
<🎜 ; > Une autre façon de l'écrire :

var a = 5;
function test(){
 this.a = 10;
}
test();
alert(a); //10

Comme indiqué ci-dessus : La fonction test() est appelée et la valeur de la variable globale a est modifiée, indiquant que cela représente l'objet global à ce moment-là.


2. Appel en tant que fonction objet
------Lorsqu'une fonction est appelée par un objet, cela pointe vers l'objet

var name="张三";
 var person={
  name:"李四",
  showName:function(){
   alert(this.name);
  }
 }
 person.showName(); //输出 李四
 var other=person.showName;
 other(); //输出 张三

Comme indiqué ci-dessus : le résultat de l'exécution de person.showName() est Li Si, indiquant que ceci dans showName pointe vers la personne à ce moment-là ; >Après avoir attribué person.showName à other, étant donné que other est une variable globale, elle peut être considérée comme un attribut de l'objet window. Ainsi, lorsque vous appelez other(), cela équivaut à appeler window.other(), donc cela pointe vers la fenêtre, et le résultat de sortie est Zhang San

Donc, lorsqu'il est appelé en tant qu'objet fonction, this ; pointe vers l'objet de l'appel.


3. Appelez

en tant que constructeur ------Le constructeur doit générer un nouvel objet via cette fonction, et cela pointera vers ce nouvel objet <🎜 ; >

Comme indiqué ci-dessus : générer un objet de type objet via le nouveau mot-clé et l'attribuer à dog, exécuter ceci Quant au constructeur, ceci dans la portée du constructeur pointe vers cet objet, dans ce cas il pointe vers dog, donc this.name est équivalent à dog.name, donc le résultat de sortie est Doudou.

function animal(){
 this.name = "豆豆";
}
var dog = new animal();
alert(dog.name); // 输出 豆豆

4. Utilisez apply ou call pour appeler

------apply() est une méthode de l'objet fonction. Elle applique une méthode d'un objet et en utilise une autre. L'objet remplace l'objet actuel.

Comme indiqué ci-dessus : b.n()----Parce que l'objet appelé est b, this pointe vers b, this. a == b.a , donc le résultat est Li Si

var a = "张三";
function test(){
 alert(this.a);
}
var b = {};
b.a = "李四";
b.n = test;
b.n(); //李四
b.n.apply(); //张三
b.n.apply(b); //李四

b.n.apply----Lorsque le paramètre de apply() est vide, il n'y a pas d'objet pour remplacer l'objet actuel et l'objet global est utilisé par défaut, donc cela pointe vers window , le résultat est Zhang San

　b.n.apply(b)----fait référence au remplacement du pointeur this actuel par b, donc cela pointe vers b, et le résultat est Li Si

(référence à cet article J'ai lu les informations sur Internet et certains livres. S'il y a des erreurs, merci de les signaler et elles seront corrigées à temps. O(∩_∩)O )


Résumé :
Cet article présente JavaScript. Les exemples de la signification de ce mot-clé dans diverses situations sont très simples, ce qui peut aider à approfondir la compréhension. Bien qu'il ne s'agisse que d'un petit concept en JavaScript, nous pouvons l'utiliser pour comprendre l'environnement d'exécution des fonctions en JavaScript. Maîtriser pleinement les connaissances pertinentes à ce sujet nous aidera à écrire facilement des programmes JavaScript orientés objet. Enfin, merci d'avoir regardé.

Ce qui précède est le contenu de l'exploration du mystère de cela en Javascript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

-->