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 :
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
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
, 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éé 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 : 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 MySQL4. appeler ou appliquer la fonction d'appel
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
