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

ZackGuo510
  • 104

看到很多资料说,哪个对象调用了这个函数,这个函数中的 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
回复
阅读 1.5k
7 个回答
✓ 已被采纳

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

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

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

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

为了规避这一设计缺陷,可以采用变量替代的方法,约定俗成,可以使用selfthat,代码如下:

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

首先搞清楚一个道理:
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

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

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

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

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))

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

你知道吗?

宣传栏