Javascript 中的 this，有時候讓人迷惑，所以總結了一下關於this指向的問題。

在函式中 this 到底取何值，是在函式真正被呼叫執行的時候確定下來的，函式定義的時候確定不了。

因為 this 的取值是函式執行上下文(context)的一部分，每次呼叫函式，都會產生一個新的執行上下文環境。當代碼中使用了 this，這個 this 的值就直接從執行的上下文中獲取了，而不會從作用域鏈中搜尋。

關於 this 的取值，大體上可以分為以下七種情況：

情況一：全域性 & 呼叫普通函式

在全域性環境中，this 永遠指向 window。

console.log(this
 
 === window);     //true

普通函式在呼叫時候(注意不是建構函式，前面不加 new)，其中的 this 也是指向 window。

var x = 10;
function foo(){
    console.log(this);     //Window
    console.log(this.x);   //10
}
foo();

情況二：建構函式

所謂的建構函式就是由一個函式 new 出來的物件，一般建構函式的函式名首字母大寫，例如像 Object，Function，Array 這些都屬於建構函式。

function Foo(){
    this.x = 10;
    console
 
.log(this);    //Foo {x:10}
}
var foo = new Foo();
console.log(foo.x);      //10

上述程式碼，如果函式作為建構函式使用，那麼其中的 this 就代表它即將 new 出來的物件。

但是如果直接呼叫 Foo 函式，而不是 new Foo()，那就變成情況1，這時候 Foo() 就變成普通函式。

function Foo(){
    this.x = 10;
    console.log(this);    //Window
}
var foo = Foo();
console.log(foo.x);      //undefined
 

情況三：物件方法

如果函式作為物件的方法時，方法中的 this 指向該物件。

var obj = {
    x: 10,
    foo: function () {
        console.log(this);        //Object
        console.log(this.x);      //10
    }
};
obj.foo();

注意：若是在物件方法中定義函式，那麼情況就不同了。

var obj = {
    x: 10,
    foo: function () {
        function f(){
            console.log(this);      //Window
            console.log(this.x);    //undefined
        }
        f();
    }
}
obj.foo();

可以這麼理解：函式 f 雖然是在 obj.foo 內部定義的，但它仍然屬於一個普通函式，this 仍指向 window。

在這裡，如果想要呼叫上層作用域中的變數 obj.x，可以使用 self 快取外部 this 變數。

var obj = {
    x: 10,
    foo: function () {
        var self = this;
        function f(){
            console.log(self);      //{x: 10}
            console.log(self.x);    //10
        }
        f();
    }
}
obj.foo();

如果 foo 函式不作為物件方法被呼叫：

var obj = {
    x: 10,
    foo: function () {
        console.log(this);       //Window
        console.log(this.x);     //undefined
    }
};
var fn = obj.foo;
fn();

obj.foo 被賦值給一個全域性變數，並沒有作為 obj 的一個屬性被呼叫，那麼此時 this 的值是 window。

情況四：建構函式 prototype 屬性

function Foo(){
    this.x = 10;
}
Foo.prototype.getX = function () {
    console.log(this);        //Foo {x: 10, getX: function}
    console.log(this.x);      //10
}
var foo = new Foo();
foo.getX();

在 Foo.prototype.getX 函式中，this 指向的 foo 物件。不僅僅如此，即便是在整個原型鏈中，this 代表的也是當前物件的值。

情況五：函式用 call、apply或者 bind 呼叫。

var obj = {
    x: 10
}
function foo(){
    console.log(this);     //{x: 10}
    console.log(this.x);   //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();

當一個函式被 call、apply 或者 bind 呼叫時，this 的值就取傳入的物件的值。

情況六：DOM event this

在一個 HTML DOM 事件處理程式裡，this 始終指向這個處理程式所繫結的 HTML DOM 節點：

function Listener(){   
    document.getElementById('foo').addEventListener('click', this.handleClick);     //這裡的 this 指向 Listener 這個物件。不是強調的是這裡的 this
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //<div id="foo"></div>
}
var listener = new Listener();
document.getElementById('foo').click();

這個很好理解，就相當於是給函式傳參，使 handleClick 執行時上下文改變了，相當於下面這樣的程式碼：

var obj = {
    x: 10,
    fn: function() {
        console.log(this);         //Window
        console.log(this.x);       //undefined
    }
};
function foo(fn) {
    fn();
} 
foo(obj.fn);

你也可以用通過 bind 切換上下文:

function  Listener(){
    document.getElementById('foo').addEventListener('click',this.handleClick.bind(this));      
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //Listener {}
}
var listener = new Listener();
document.getElementById('foo').click();

前六種情況其實可以總結為： this 指向呼叫該方法的物件。

情況七：箭頭函式中的 this

當使用箭頭函式的時候，情況就有所不同了：箭頭函式內部的 this 是詞法作用域，由上下文確定。

var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);      //Object {x: 10}
                    console.log(this.x);    //10
                }
            }
        }
        fn()()();
    }
}
obj.foo();

現在，箭頭函式完全修復了 this 的指向，this 總是指向詞法作用域，也就是外層呼叫者 obj。

如果使用箭頭函式，以前的這種 hack 寫法：

var self = this;

就不再需要了。

var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);    // Object {x: 10}
                    console.log(this.x);  //10
                }
            }
        }
        fn.bind({x: 14})()()();
        fn.call({x: 14})()();
    }
}
obj.foo();

由於 this 在箭頭函式中已經按照詞法作用域綁定了，所以，用 call()或者 apply()呼叫箭頭函式時，無法對 this 進行繫結，即傳入的第一個引數被忽略。