理解JavaScript的Bind(翻譯)

初學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。

瀏覽器支持

瀏覽器 支持版本
Chrome 7
Firefox (Gecko) 4.0(2)
Firefox (Gecko) 4.0(2)
Internet Explorer 9
Opera 11.60
Safari 5.1.4

最后

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容