摘要：而改變了這種狀態，雖然定義的類用運算符得到的仍然是，但它不能像普通函數一樣直接調用同時，中定義的方法函數，也不能當作構造函數用來調用。而在中，用調用一個構造函數，會創建一個新對象，而其中的就指向這個新對象。

JavaScript 中的 this 指向問題有很多博客在解釋，仍然有很多人問。上周我們的開發團隊連續兩個人遇到相關問題，所以我不得不將關于前端構建技術的交流會延長了半個時候討論 this 的問題。

與我們常見的很多語言不同，JavaScript 函數中的 this 指向并不是在函數定義的時候確定的，而是在調用的時候確定的。換句話說，函數的調用方式決定了 this 指向。

JavaScript 中，普通的函數調用方式有三種：直接調用、方法調用和 new 調用。除此之外，還有一些特殊的調用方式，比如通過 bind() 將函數綁定到對象之后再進行調用、通過 call()、apply() 進行調用等。而 es6 引入了箭頭函數之后，箭頭函數調用時，其 this 指向又有所不同。下面就來分析這些情況下的 this 指向。

直接調用，就是通過 函數名(...) 這種方式調用。這時候，函數內部的 this 指向全局對象，在瀏覽器中全局對象是 window，在 NodeJs 中全局對象是 global。

來看一個例子：

// 簡單兼容瀏覽器和 NodeJs 的全局對象
const _global = typeof window === "undefined" ? global : window;

function test() {
    console.log(this === _global);    // true
}

test();    // 直接調用

這里需要注意的一點是，直接調用并不是指在全局作用域下進行調用，在任何作用域下，直接通過 函數名(...) 來對函數進行調用的方式，都稱為直接調用。比如下面這個例子也是直接調用

(function(_global) {
    // 通過 IIFE 限定作用域

    function test() {
        console.log(this === _global);  // true
    }

    test();     // 非全局作用域下的直接調用
})(typeof window === "undefined" ? global : window);

還有一點需要注意的是 bind() 的影響。Function.prototype.bind() 的作用是將當前函數與指定的對象綁定，并返回一個新函數，這個新函數無論以什么樣的方式調用，其 this 始終指向綁定的對象。還是來看例子：

const obj = {};

function test() {
    console.log(this === obj);
}

const testObj = test.bind(obj);
test();     // false
testObj();  // true

那么 bind() 干了啥？不妨模擬一個 bind() 來了解它是如何做到對 this 產生影響的。

const obj = {};

function test() {
    console.log(this === obj);
}

// 自定義的函數，模擬 bind() 對 this 的影響
function myBind(func, target) {
    return function() {
        return func.apply(target, arguments);
    };
}

const testObj = myBind(test, obj);
test();     // false
testObj();  // true

從上面的示例可以看到，首先，通過閉包，保持了 target，即綁定的對象；然后在調用函數的時候，對原函數使用了 apply 方法來指定函數的 this。當然原生的 bind() 實現可能會不同，而且更高效。但這個示例說明了 bind() 的可行性。

上面的示例中用到了 Function.prototype.apply()，與之類似的還有 Function.prototype.call()。這兩方法的用法請大家自己通過鏈接去看文檔。不過，它們的第一個參數都是指定函數運行時其中的 this 指向。

不過使用 apply 和 call 的時候仍然需要注意，如果目錄函數本身是一個綁定了 this 對象的函數，那 apply 和 call 不會像預期那樣執行，比如

const obj = {};

function test() {
    console.log(this === obj);
}

// 綁定到一個新對象，而不是 obj
const testObj = test.bind({});
test.apply(obj);    // true

// 期望 this 是 obj，即輸出 true
// 但是因為 testObj 綁定了不是 obj 的對象，所以會輸出 false
testObj.apply(obj); // false

由此可見，bind() 對函數的影響是深遠的，慎用！

方法調用是指通過對象來調用其方法函數，它是 對象.方法函數(...) 這樣的調用形式。這種情況下，函數中的 this 指向調用該方法的對象。但是，同樣需要注意 bind() 的影響。

const obj = {
    // 第一種方式，定義對象的時候定義其方法
    test() {
        console.log(this === obj);
    }
};

// 第二種方式，對象定義好之后為其附加一個方法(函數表達式)
obj.test2 = function() {
    console.log(this === obj);
};

// 第三種方式和第二種方式原理相同
// 是對象定義好之后為其附加一個方法(函數定義)
function t() {
    console.log(this === obj);
}
obj.test3 = t;

// 這也是為對象附加一個方法函數
// 但是這個函數綁定了一個不是 obj 的其它對象
obj.test4 = (function() {
    console.log(this === obj);
}).bind({});

obj.test();     // true
obj.test2();    // true
obj.test3();    // true

// 受 bind() 影響，test4 中的 this 指向不是 obj
obj.test4();    // false

這里需要注意的是，后三種方式都是預定定義函數，再將其附加給 obj 對象作為其方法。再次強調，函數內部的 this 指向與定義無關，受調用方式的影響。

注意這里說的是方法中而不是方法調用中。方法中的 this 指向全局對象，如果不是因為 bind()，那就一定是因為不是用的方法調用方式，比如

const obj = {
    test() {
        console.log(this === obj);
    }
};

const t = obj.test;
t();    // false

t 就是 obj 的 test 方法，但是 t() 調用時，其中的 this 指向了全局。

之所以要特別提出這種情況，主要是因為常常將一個對象方法作為回調傳遞給某個函數之后，卻發現運行結果與預期不符——因為忽略了調用方式對 this 的影響。比如下面的例子是在頁面中對某些事情進行封裝之后特別容易遇到的問題：

class Handlers {
    // 這里 $button 假設是一個指向某個按鈕的 jQuery 對象
    constructor(data, $button) {
        this.data = data;
        $button.on("click", this.onButtonClick);
    }

    onButtonClick(e) {
        console.log(this.data);
    }
}

const handlers = new Handlers("string data", $("#someButton"));
// 對 #someButton 進行點擊操作之后
// 輸出 undefined
// 但預期是輸出 string data

this.onButtonClick 作為一個參數傳入 on() 之后，事件觸發時，理論上是對這個函數進行的直接調用，而不是方法調用，所以其中的 this 會指向全局對象 —— 但實際上由于調用事件處理函數的時候，this 指向會綁定到觸發事件的 DOM 元素上，所以這里的 this 是指向觸發事件的的 DOM 元素(注意：this 并非 jQuery 對象)，即 $button.get(0)(注意代碼前注釋中的假設)。

要解決這個問題有很多種方法：

// 這是在 es5 中的解決辦法之一
var _this = this;
$button.on("click", function() {
    _this.onButtonClick();
});

// 也可以通過 bind() 來解決
$button.on("click", this.onButtonClick.bind(this));

// es6 中可以通過箭頭函數來處理，在 jQuery 中慎用
$button.on("click", e => this.onButtonClick(e));

不過請注意，將箭頭函數用作 jQuery 的回調時造成要小心函數內對 this 的使用。jQuery 大多數回調函數(非箭頭函數)中的 this 都是表示調用目標，所以可以寫 $(this).text() 這樣的語句，但 jQuery 無法改變箭頭函數的 this 指向，同樣的語句語義完全不同。

在 es6 之前，每一個函數都可以當作是構造函數，通過 new 調用來產生新的對象(函數內無特定返回值的情況下)。而 es6 改變了這種狀態，雖然 class 定義的類用 typeof 運算符得到的仍然是 "function"，但它不能像普通函數一樣直接調用；同時，class 中定義的方法函數，也不能當作構造函數用 new 來調用。

而在 es5 中，用 new 調用一個構造函數，會創建一個新對象，而其中的 this 就指向這個新對象。這沒有什么懸念，因為 new 本身就是設計來創建新對象的。

var data = "Hi";    // 全局變量

function AClass(data) {
    this.data = data;
}

var a = new AClass("Hello World");
console.log(a.data);    // Hello World
console.log(data);      // Hi

var b = new AClass("Hello World");
console.log(a === b);   // false

先來看看 MDN 上對箭頭函數的說明

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

這里已經清楚了說明了，箭頭函數沒有自己的 this 綁定。箭頭函數中使用的 this，其實是直接包含它的那個函數或函數表達式中的 this。比如

const obj = {
    test() {
        const arrow = () => {
            // 這里的 this 是 test() 中的 this，
            // 由 test() 的調用方式決定
            console.log(this === obj);
        };
        arrow();
    },

    getArrow() {
        return () => {
            // 這里的 this 是 getArrow() 中的 this，
            // 由 getArrow() 的調用方式決定
            console.log(this === obj);
        };
    }
};

obj.test();     // true

const arrow = obj.getArrow();
arrow();        // true

示例中的兩個 this 都是由箭頭函數的直接外層函數(方法)決定的，而方法函數中的 this 是由其調用方式決定的。上例的調用方式都是方法調用，所以 this 都指向方法調用的對象，即 obj。

箭頭函數讓大家在使用閉包的時候不需要太糾結 this，不需要通過像 _this 這樣的局部變量來臨時引用 this 給閉包函數使用。來看一段 Babel 對箭頭函數的轉譯可能能加深理解：

// ES6
const obj = {
    getArrow() {
        return () => {
            console.log(this === obj);
        };
    }
}    

// ES5，由 Babel 轉譯
var obj = {
    getArrow: function getArrow() {
        var _this = this;
        return function () {
            console.log(_this === obj);
        };
    }
};

另外需要注意的是，箭頭函數不能用 new 調用，不能 bind() 到某個對象(雖然 bind() 方法調用沒問題，但是不會產生預期效果)。不管在什么情況下使用箭頭函數，它本身是沒有綁定 this 的，它用的是直接外層函數(即包含它的最近的一層函數或函數表達式)綁定的 this。

this.onButtonClick 用于 jQuery 事件的時候，this 已經被 jQuery 改為指向觸發事件的元素，感謝 @月亮哥哥 和 @QoVoQ 指出。此錯誤已經在文中修改了。