Explication de ceci en Javascript

Javascript pointe vers ce

Débutantjavascript Tout le monde le fera avoir beaucoup de confusion à propos de jsce, comme l'exemple suivant  :

var a = 'jack';var obj = {a: 'tom',b  : fonction(){ console.log(ce.a);}>;var c = obj.b; c();//Sortiejack

Nouveau sur Les personnes qui utilisent js peuvent utiliser d'autres langages orientés objet pour comprendre , et penser que le résultat ici devrait être tom, mais en fait, la sortie ici est jack , Mais qu'est-ce que ça demande ??Et l'affiche l'analysera étape par étape.

Le commun ce dans js pointe vers 4 espèces :

1 dans l'objet ce pointe vers.

Qu'est-ce que cela dans un objet signifie que les propriétés d'un objet sont fonction, et fonctionIl existe des utilisations de ce, Par exemple, l'exemple suivant  :

var obj = {a : 'tom',b : fonction(){ console.journal(ce.a) ;}};obj.b();//La sortie est tom

Dans ce cas, ce points to L'objet qui appelle cette fonction , voici obj, Un autre exemple est le suivant : :

var obj = {a: 'tom ',b : fonction(){ console. log(ce.a) ;},c : {c0 : 'rose',c1 : fonction( ){             console.log(ce. c0);} }};obj .c.c1();//sortiejack

Lorsque la fonction est appelée, contient plusieurs objets, bien que cette fonction soit celui le plus utilisé Lorsqu'il est appelé par un objet externe, this pointe uniquement vers son objet de niveau supérieur

Mais dans l'exemple d'ouverture Pourquoi ?

var a = 'jack'; var obj = {a : 'tom',b : fonction(){ console.log (ce.un); }};var c = obj.b;c();//sortiejack

Tout le monde doit se souvenir d'une phrase : ceci pointe vers le dernier objet qui l'a appelé , est le ici > c se voit attribuer la valeur de obj.b, mais la variable c est toujours accroché à l'objet global window , donc au final ceci pointe vers l'objet global window

2 Appelez directement la fonction

C'est-à-dire utiliser directement la fonction de déclaration déclarative ou variable, appeler directement la fonction globalement

var nom = 'tom';var a = fonction(){var nom = 'jack';console.log(ce.name);};console.log(a());//sortietom

Iciun se trouve dans la fenêtre globale dans la déclaration, est également équivalent à window.a() lorsqu'il est appelé, donc le but de this est global fenêtreobjet, inclut ce cas :

var nom = 'tom';var a = fonction(){var nom = 'jack';fonction b(){       console.log(ce.name); }b();//Sortietomconsole.log(ce.name);};console.log(a() );//Sortietom

a et b produisent les deux tom, fonctionb Lorsqu'il est appelé par la suite dans la fonction a, il pointe toujours vers l'objet global fenêtre, Pourquoi est-ce ? ? Vous pouvez vous souvenir d'une phrase , js tant qu'il n'y a pas d'objection à appeler directement Lorsque la fonction , est appelée, le pointeur de ce sera pointé vers la fenêtre globale Object

est comme l'exemple précédent lors de l'appel de , obect.function(), ceci pointera vers objet sur , comme

var obj = {a : 'tom',b : fonction(){console.log(ce .a);}} ;obj.b();//sortie tom

Comme l'exemple d'ouverture, cette phrase est également facile à comprendre , L'appel de fonction c Il n'y a pas d'appel d'objet, il sera donc pointé vers l'objet global window

var a = 'jack';var obj = {a: 'tom',b : fonction(){ console.log( ce.a);}};var c = obj.b;c();//sortiejack

3. >ce dans le constructeur pointe versLe constructeur en Js

n'est pas clairement divisé des fonctions ordinaires

, Lorsqu'une fonction ordinaire est utilisée pour créer une classe d'objets, elle est appelée constructeur ou constructeur. Pour qu'une fonction serve de véritable constructeur, elle doit remplir les conditions suivantes : 1

, à l'intérieur de la fonction, le nouvel objet (

this ), généralement en ajoutant des propriétés et des méthodes.

2

, Le constructeur peut contenir une instruction return (non recommandé), mais la valeur de retour doit être this, ou d'autres valeurs de type non-objet.

Par exemple

 :

fonction Personnes(nom, âge, sexe){ce.nom = nom; ce.âge = âge;ce.sexe= sexe;} var p = nouveau Personnes('tom',12,'Homme');console.log(p.nom + p. sexe + p.âge); //sortietomMâle12

Le this pointe ici vers l'objet actuellement créé

Bien entendu, le constructeur a aussi des cas particuliers , tels que :

fonction Personnes(nom, âge, sexe){ce.nom = nom; ce.âge = âge;ce.sexe= sexe;retour {};}var p = nouveau Les gens('tom',12, 'Mâle');console.log(p.nom);//sortieundefined

Il n'est pas difficile de comprendre que le constructeur exige que la valeur de retour soit this ou un type non-objet , Donc le People ici n'est pas un constructeur au sens strict , déclaré ici p est en fait juste la valeur de retour de la fonction People, donc le résultat final est indéfini, Si vous modifiez ici la valeur de retour en un type non-objet, le résultat final sera différent

fonction Personnes(nom, âge, sexe){ce.nom = nom; ce.âge = âge;ce.sexe= sexe;retour 1;}var p = nouveau Les gens('tom',12,'Mâle');console.log(p.nom);//sortie tom

IciPeople est un constructeur au sens strict, donc ce pointe toujours vers l'objet actuellement créé

4. appeler ou appliquer la fonction d'appel

Appeler et appliquerL'utilisation pratique de la fonction est presque la même, Le premier paramètre est l'objet de la fonction appelante, Les paramètres suivants Ce sont tous des paramètres de la fonction , mais appel La méthode de passage des paramètres de la fonction est de transmettre un nombre illimité de paramètres , c'est-à-dire call([thisObject[,arg1 [,arg2 [,...,argn]]]]) Les paramètres suivants correspondent respectivement aux fonctions Les paramètres de l'appel, et le premier paramètre de la fonction apply sont les mêmes que celui de call, Le deuxième paramètre est le type de tableau , apply( [thisObj [,argArray] ])Chaque élément du tableau correspondant également aux paramètres des appels de fonction respectivement et , lors de l'utilisation de call ou appliquer la fonction est , ce dans la méthode sera redirigée pour appeler ou appliquerLe premier paramètre de la fonction, Par exemple :

var a = 1;var b = 2;var c = {a: 3,b: 4};fonction ajouter(){ console.log(ce.un + ce .b)}ajouter();//sortie3ajouter.appliquer(c); //Sortie7

Lorsque le premier add est appelé, il n'y a pas accès direct à l'objet L'appel sera pointé vers l'objet global window, donc le résultat de sortie est 3, et le premier ajouter La fonction est appelée via la fonction apply, donc le pointeur de this sera dirigé vers c Le résultat final de sortie est donc 7

Es6Développer:

Le ce de la fonction flèche dans Es6 pointe vers ce de la fonction flèche dans es5 >C'est différent, Mentionnons ici : Puisque la fonction flèche ne lie this , il capture la this valeur du contexte dans lequel il se trouve (c'est-à-dire où il est défini) comme son propre this valeur, donc la méthode call() / apply() / bind() passe simplement les paramètres pour la fonction flèche, et pour elle ce Aucun impact. Considérant que ce est au niveau lexical, les règles liées à ce en mode strict seront ignorées.

1 . Fonction flèche dans l'objet

var a = { nom: 'tom',b: {c : () => {      console.log(ce );} },};a.b.c(); // L'utilisation de this dans l'objet de sortiewindow

sera pointée vers la window globale Objet, Ainsi, en utilisant la fonction flèche dans l'objet, le point de ce sera également pointé vers le global fenêtreObjet.

Appel de fonctions fléchées dans les méthodes

var test = fonction(){ce.heure = 1; setTimeout(()=>{ console.log(ce.heure);}, 100)};var t = nouveau test();//sortie1

Il n'y a pas de ce pointeur, dans la fonction flèche, donc le pointeur n'est lié qu'au contexte dans lequel il a été créé , voici l'appel du constructeur, donc test pointe vers ceci. Pour t objets , , donc ce dans la fonction flèche pointe également vers l'objet de retour

Cet article présente cela en Javascript Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Explication détaillée sur le téléchargement de fichiers Word, txt, Excel, PPT et autres vers le mini-programme WeChat

Comment traiter les fichiers téléchargés par l'applet WeChat via PHP back-end

Présentation de 7 conseils pour améliorer les performances de MySQL

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!