●在瀏覽器中，this指向的是全局對象(即window):

var foo = "hello";
console.log(this.foo);    // hello
console.log(window.foo);    // hello

如果你在聲明變量的時候沒有使用var或let (ES6)那么這個變量即為全局變量。

foo = "hello";
function test() {
   var foo = "world";
}

console.log(this.foo);    //hello

test();
console.log(this.foo);    //world

●構造函數
先看兩個例子：

function foo() {
    this.a = 23;
}

var o = new foo();
console.log(o.a);    //23

function foo() {
    this.a = 23;
    return {a: 24};
}

var o = new foo();
console.log(o.a);    //24

一開始this指向全局對象，當我們用構造器定義變量o之后，此時this的指向就發生了變化，this不再指向全局對象，而是指向構造器new出來的那個對象(這里指的是o)

在第二個例子中，函數foo是有返回值的，且返回值為對象，所以構造器最后輸出的是默認返回的對象，也就是24而不是23

●函數作為對象的一個屬性
如果函數作為對象的屬性，而且作為對象的屬性調用時，函數中的this指向該對象。

var obj = {
    x: 10,
    fn: function() {
        console.log(this.x)
    }
}

obj.fn();

結果顯示為

圖片.png

我們再看一段類似的代碼：

var obj = {
    x: 10,
    fn: function() {
        console.log(this.x)
    }
}

var foo = obj.fn;
foo();

結果會是10嗎？讓數據來告訴我們答案：

圖片.png

答案是undefined。為什么會是醬紫呢？因為this的指向發生了變化，this不再指向對象obj，而是指向了全局對象window,fn()函數被賦值到新的對象foo上，而且我們也沒有將其作為obj的屬性進行調用,this的指向就會發生了變化。

記住一句話就好：this指向調用時所綁定函數所綁定的對象！