詳解javascript中this的工作原理

在 JavaScript 中 this 常常指向方法調用的對象，但有些時候並不是這樣的，本文將詳細解讀在不同的情況下 this 的指向。

一、指向 window：

在全局中使用 this，它將會指向全局對象，因為瀏覽器中運行的 JavaScript 的全局對象預設為 window，
所以，此時 this 指向 window。

例如：

console.log(this) // 控制台將列印出 window 對象

在全局作用域內的函數調用， this 也會執行 window。

function foo(){
    console.log(this);
};

foo(); // 控制台也會列印出 window 對象

此處並不難理解，因為全局對象預設為 window，則 foo() 實質是 window.foo()。

其實，在javascript中函數調用時，this都會指向window對象。看下麵的執行結果：

function foo(){
    console.log(this);
};
            
var demo = document.querySelector(".demo");
            
demo.onclick = foo;         //this指向demo元素對象
            
demo.onclick = function(){
    foo();                  //this指向window對象
};

註意：在 ES5 中，使用嚴格模式時，不存在全局變數， 此時 this 將不再指向 window， 而是 undefined 。

二、指向方法調用的對象：

在對象的方法調用中，this 指向該方法調用的對象。

var obj = {
    getMe: function(){
        console.log(this)
    }
};

obj.getMe(); // 控制台列印出 obj 對象

三、構造函數內，指向調用構造函數所創建的對象實例：

通常我們會使用 new 關鍵詞調用構造函數創建新的對象實例，此時構造函數內的 this 就會指向這個新創建出來的對象。

如：

//構造函數
function Person(name){
    this.name = name;
    this.getMe = function(){
        console.log(this);
    }
};

var joe = new Person("joe");

joe.getMe(); //控制台列印出一個新的名字為 “joe” 的 Person 實例

四、使用函數的 call 或 apply 方法時，this 將會被顯式設置為函數調用的第一個參數：

例：

var obj = {
    name: "object"
};

function a(){
    console.log(this)
};

a.call(obj); //控制台列印出 obj 對象

出現這樣的結果是由 call 和 apply 的實現原理決定的，call 和 apply 改變 this 指向的原理是它改變了函數的運行上下文環境。