一道關于 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指針丟失