Un puzzle à ce sujet en JavaScript

Question

J'ai vu beaucoup d'informations disant que quel objet appelle cette fonction, ceci dans cette fonction pointe vers cet objet.
Dans l'exemple suivant, la fonction foo est appelée via l'instruction foo(). Pourquoi cela pointe-t-il vers le monde global ? Window.foo() n'est-il pas appelé par l'objet global ?
Veuillez nous conseiller, merci !

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var foo = function (){
         console.log(this.x);
     }
     foo();
  }
};
obj.f(); //10

Answer 1

Il y a un problème avec ce qui a été dit à l'étage. Foo n'est pas une variable globale. Un moyen simple de juger (mode non strict) est :
1 Lorsqu'un objet supérieur n'est pas attribué à une fonction, cela pointe vers la fenêtre
2. . Lorsqu'une fonction est assignée Lorsqu'il s'agit d'objets supérieurs, cela pointe uniquement vers l'objet supérieur (parent) le plus proche
tel que foo.fn.o(), cela pointe en o vers fn

.

Answer 2

Voici à quoi ça ressemble, je l'ai écrit dans les commentaires

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var foo = function (){
         console.log(this.x);//你这是把函数赋值给一个 foo的变量。此时的 foo 是全局的，所以下面调用 foo（）这里是10嘛
     }
     foo();
  }
};
obj.f(); // 这个调用 f 函数，因为 f()，并没有返回出去什么，所以这里是 undefined

Answer 3

Pour 内部函数，即声明在另一个函数体内的函数，都将会绑定到全局对象上，这是JavaScript的设计缺陷, la méthode de conception correcte est que le this de la fonction interne doit être lié à l'objet correspondant à sa fonction externe, ce qui conduit aux problèmes ci-dessus.

Afin d'éviter ce défaut de conception, vous pouvez utiliser 变量替代的方法，约定俗成，可以使用self或that, le code est le suivant :

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var self = this;
     var foo = function (){
         console.log(self.x);
     }
     foo();
  }
};
obj.f();

Answer 4

Tout d’abord, comprenons une chose :
1 : la fenêtre est aussi un objet, c’est un objet spécial, elle représente le monde entier. Lorsque vous appelez une fonction de la manière suivante :
function foo(){....}
foo();//
Cette méthode d'appel en deuxième ligne (il n'y a aucun objet défini par vous devant la fonction) , Nous appelons cela « appel mondial ». En fait, c'est équivalent à window.foo(). Alors tu l'as vu ? Appeler une fonction globalement est en fait un cas particulier d'appel d'une fonction sur un objet, car l'objet à ce moment est window.
2 : Alors pourquoi le code ci-dessus appelle-t-il foo() globalement au lieu de obj ? Je vais changer le code et le laisser afficher 20 :

var x = 10;
var obj = {
  x: 20,
  f: function () {
     console.log(this.x);
  }
};
obj.f();//20

Comparez les deux morceaux de code et trouvez leurs différences.

Answer 5

var x = 10;
var obj = {
  x: 20,
  f: function () {
     console.log(this.x);  // 20
     var foo = function (){
         // 这里函数的作用域是window
         console.log(this.x);
     }
     foo();
  }
};
obj.f(); //10

var x = 10;
var obj = {
  x: 20,
  f: function () {
     let that = this;
     var foo = function (){
         // 这里形成了闭包
         console.log(that.x);
     }
     foo();
  }
};
obj.f(); //20

Answer 6

Vous pouvez réécrire le code comme ceci :

var x = 10;
var obj = {
  x: 20,
  f: function () {
     var foo = function (){
         console.log(this.x);
     }
     foo.call(null) // 等价于foo.call(window)
  }
};
obj.f.call(obj); //10  结果不变

---

Grâce à l'exemple ci-dessus, vous pouvez comprendre que lors de l'appel d'une fonction, l'analyseur JavaScript est appelé sous forme d'appel ou d'application. De cette façon, spécifiez une valeur pour cela dans la fonction. Le premier paramètre de ces deux méthodes est la valeur interne de la méthode foo lors de son appel. Si le premier paramètre de la méthode d'appel est nul ou indéfini, l'objet global sera utilisé comme premier paramètre par défaut (vous pouvez essayer). Essayez foo.call(), foo.call(null), foo.call(undefined))

Answer 7

Fonction dans la fonction, ce pointeur est perdu