一道关于 JavaScript 中 this 的题目的困惑

Question

看到很多资料说，哪个对象调用了这个函数，这个函数中的 this 就指向这个对象。
下面这个例子中，foo这个函数，是通过 foo()这个语句调用的，为什么this 指向全局？并没有 Window.foo( )这样由全局对象调用呀？
求教，多谢！

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指针丢失