初學JavaScript時，你可能最不想關心的就是函數綁定。不過當遇到一個經典問題，如何在另外一個函數中保持this指針。這個時候，你會明白Function.prototype.bind()是一個解決辦法。

第一次遇到這個問題的時候，你可能更傾向于通過一個變量來持有this，這樣即使更換了函數的context（上下文），依然可以成功調用函數。許多人會用self,_this，甚至context作為這個變量名，我常見的是that。這個方式沒有問題，不過相比較bind更贊。

我們到底要解決什么問題？

下面一段代碼

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

上面的代碼是正確的，如果直接使用this.specialFunction，函數已經失去了當前上下文，然后就會收到以下錯誤

Uncaught TypeError: Object [object global] has no method 'specialFunction'

注意：嚴格模式，此種情況上下文為undefined

為了能讓specialFunction正常調用，我們需要保證它在被調用時候context是指向的myObj對象。使用that.specialFunction()能讓我們持有context并正確調用函數。

修改部分代碼：

render: function () {

    this.getAsyncData(function () {

        this.specialFunction();

        this.anotherSpecialFunction();

    }.bind(this));

}

剛剛做了什么

bind()會返回一個新的函數。使用時，可以把this作為參數傳進去，那么返回的新函數就和this綁定在一起了。在結合上面的代碼，我們傳了this（就是myObj）和函數綁定在一起，這是我們希望的context。然后等到函數執行的時候，this就會指向myObj對象。
如果對bind內部實現有興趣，可以看下下面的代碼。

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

觀察apply的函數定義，fun.apply(thisArg, [argsArray])它的第一個參數就是函數的上下文。

下面有一個非常簡單的bind使用例子

var foo = {
    x: 3
}

var bar = function(){
    console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

如果不調用bind，bar的context是全局的(global scope)，也就是this指針指向的window。綁定完后，bar的this指針指向foo。

瀏覽器支持

最后

我沒有逐字逐句進行翻譯，其中有些內容我按照自己的理解進行了略微修改，還有些內容我直接跳過。歡迎閱讀原文。
https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/