Exemple d'analyse de ceci dans Js

Le contenu partagé avec vous dans cet article concerne cela, par exemple en analysant Js. Les amis dans le besoin peuvent s'y référer

Partir de zéro avec un exemple

Il y a quelques jours, alors que je regardais les questions d'entretien, j'ai vu ce programme :

obj = {
  name: 'a',
  getName: function () {
    console.log(this.name);
  }
};

var fn = obj.getName;obj.getName();fn();

La question requise est icifn()Le résultat de l'exécution et temps d'exécution this problème de pointage. Résumons à nouveau l'utilisation de ceci en nous basant sur cet exemple et les questions qu'il contient.

L'environnement d'exécution de ceci

Le sens de celui-ci est déterminé en fonction de son environnement d'exécution. On distingue principalement les situations suivantes :

1 Contexte global

L'environnement global est en dehors de toute fonction. Si ceci est utilisé, cela fait référence à l'objet global. Par exemple, dans le navigateur :

this === window    // true

2 Contexte de fonction

Dans le contexte de fonction, c'est-à-dire lors de l'appel de this à l'intérieur de la fonction, cela dépend de la manière dont cela est appelé.

2.1 Appel simple

Dans un appel simple, ceci dans la fonction pointe vers l'objet global, tel que :

function myFun() {
   console.log(this === window);
}

myFun();    // true

Dans l'exemple ci-dessus, la fonction

est appelé directement, où myFun est égal à l'objet global this. windowLe principe est que lors de la déclaration de la fonction
, elle myFun existe comme attribut de l'objet global. Ainsi, lorsque cette fonction est utilisée directement, cela équivaut à appeler , c'est-à-dire que lorsqu'elle est appelée comme attribut de window.myFun(), window pointe vers this. window

Déboguer ce programme dans le navigateur pour le vérifier plus clairement :

2.2 Comme méthode d'un objet

Quand une fonction est utilisée comme méthode méthode d'un objet Lorsqu'il est appelé, son this pointe vers cet objet. En prenant l'exemple initial comme exemple, lorsque

est exécuté, ceci dans la fonction pointe vers l'objet obj. Donc sortie obj.getName(). aMais lorsque nous séparons cette fonction séparément, changeons l'exemple initial :

function myFun() {
  console.log(this.name);
}var obj = {
  name: 'a',
  getName: myFun
};

obj.getName();    // avar obj2 = {
  name: 'b',
  fun: myFun
};

obj2.fun();   // b

Comme le montre cet exemple, la direction de

dépend entièrement de la référence du membre la plus proche this 🎜>, à quel objet et à quelle référence la fonction est liée, alors cela aura des points différents. Dans l'exemple ci-dessus, nous avons lié les fonctions avec à différents objets comme méthodes, puis leur this correspondant sera lié à différents objets et les valeurs de this seront différentes. this.nameDe même, lorsque nous exécutons
directement, cette fonction est appelée comme propriété de l'objet global myFun(). Ainsi, l'attribut window est introuvable et myName est affiché. undefined(Parce que l'objet global a l'attribut par défaut window qui est une chaîne vide, name est utilisé comme exemple ici) myName

function myFun() {
  console.log(this.myName);
}
myFun();    // undefined

Enfin, expliquez le exemple au début,

est affecté à obj.getName, donc exécuter fn équivaut à exécuter fn, c'est-à-dire que la fonction anonyme initialement initialisée comme attribut de obj est liée au window.fn() de window attribut, donc son fn pointe vers this. windowL'attribut
de window est une chaîne vide, donc la sortie est vide. name

Recommandations associées :

Explication détaillée de cet attribut en javascript

Compréhension approfondie de ce pointeur en 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!