JavaScript this詳解

this是JavaScript中無法迴避的一個概念，在很多其他程式語言中也是如此。

如果對它沒有良好的掌握，那麼開發工作將無法進行。

下面通過程式碼例項對它進行一下詳細介紹。

首先看一段極為簡單的程式碼：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var url = "www.softwhy.com";
function func(){
  console.log(url);
}
func();

程式碼執行效果截圖如下：

程式碼會列印出本站的網址。

首先在函式作用域查詢變數url，沒有找到，那麼在全域性作用域查詢。

程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var url = "www.softwhy.com";
function func(){
  console.log(this.url);
  console.log(window.url);
  console.log(window===this);
}
func();

程式碼執行效果截圖如下：

上面程式碼中簡單演示了this的應用。

this.url與window.url列印值相同，從最後一個列印結果可以看到，this指向window物件。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="http://www.softwhy.com";
var ant={
    webName:"螞蟻部落",
    func:function(){
        console.log(this.webName);
        console.log(this===ant);
    }
}
ant.func()

程式碼執行效果截圖如下：

列印結果是"螞蟻部落"而不是"http://www.softwhy.com"。

最後一行列印結果是true，說明this指向ant物件。

由此可以總結一下this：

（1）.非箭頭函式中，this總是指向呼叫函式的物件。

（2）.箭頭函式對它內部this的指向做了很大改動，具體參閱JavaScript 箭頭函式一章節。

下面再分析幾段程式碼例項以加深對this的理解：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var func=function(){
  this.x=1
}
func();
console.log(x);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.宣告一個匿名函式並賦值給變數func。

（2）.全域性變數是window物件的一個屬性，也就是說func等同於window.func。

（3）.那麼func()等同於window.func()。

（4）.根據非箭頭函式，“this總是指向呼叫函式的物件”這個原則，那麼函式中的this指向window物件，this.x=1等同於window.x=1，所以列印結果是1。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var webName="螞蟻部落一";
var obj={
    webName:"螞蟻部落二",
    func:function(){
        console.log(this.webName);
        function test(){
            console.log(this.webName);
        }
        test();
    }
}
obj.func();

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.obj.func()，這是obj物件呼叫func，所以func內部的this是指向obj物件的，於是第一個this.webName中的webName是obj物件的屬性，列印結果是"螞蟻部落二"。

（2）.test()，凡是沒有顯式呼叫的函式，其呼叫物件都是window物件，所以test中的this指向window物件，又由於全域性作用域中宣告的變數是window物件的屬性，所以列印結果是"螞蟻部落一"。