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

问题描述

看到很多资料说，哪个对象调用了这个函数，这个函数中的 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

问题解答

楼上讲的有点问题，foo不是全局变量，简单点来判断（非严格模式）就是：1.当一个函数没有被指定上级对象的时候，this指向window2.当一个函数有被指定上级对象的时候，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回答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();回答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

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

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

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