Ein Rätsel dazu in JavaScript

Question

Ich habe viele Informationen gesehen, die besagen, dass das Objekt, das diese Funktion aufruft, in dieser Funktion auf dieses Objekt verweist.
Im folgenden Beispiel wird die Funktion foo über die Anweisung foo() aufgerufen. Warum zeigt dies auf die globale Welt? Wird Window.foo() nicht vom globalen Objekt aufgerufen?
Bitte um Rat, danke!

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

Answer 1

楼上讲的有点问题，foo不是全局变量，简单点来判断（非严格模式）就是：
1.当一个函数没有被指定上级对象的时候，this指向window
2.当一个函数有被指定上级对象的时候，this仅指向最靠近的上级（父）对象
如 foo.fn.o() , o里面的this指向fn

Answer 2

是这样子的，我写在注释里面

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

对于内部函数，即声明在另一个函数体内的函数，都将会绑定到全局对象上，这是JavaScript的设计缺陷，正确的设计方式是内部函数的this应该绑定到其外层函数对应的对象上，所以导致以上问题。

为了规避这一设计缺陷，可以采用变量替代的方法，约定俗成，可以使用self或that，代码如下：

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

Answer 4

首先搞清楚一个道理：
1: window也是一个对象，它是一个特殊的对象，它代表全局。 当你以以下方式调用一个函数的时候：
function foo(){....}
foo();//
第二行的这种调用方式（函数前面没有一个你自己定义的object),我们叫做‘全局调用’。其实等同于window.foo()。所以你看出来了吗？在全局调用函数，其实是在对象上调用函数的一个特例，因为这时候的对象是window.
2: 那为什么上面的代码是在全局调用了foo(),而不是在obj上面呢？我把代码改一下，让他输出20:

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

对比一下，两段代码，找找它们的不同。

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

你可以把代码改写为这样子的：

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  结果不变

---

通过上面的例子，你可以这样理解 当调用一个函数的时候，JavaScript解析器是按照call或者apply这样的形式去调用的。通过这样的方式来为函数中的this指定一个值。这两个方法的第一个参数就是foo方法被调用时其内部this的值，如果call方法的第一个参数为null、undefined时，就会默认把全局对象作为第一个参数(你可以试试foo.call()、foo.call(null)、foo.call(undefined))

Answer 7

函数内套函数，this指针丢失