這篇文章主要介紹了javascript中的Function.prototye.bind的相關資料,需要的朋友可以參考下
函數綁定(Function binding)很有可能是你在開始使用JavaScript時最少關注的一點,但是當你意識到你需要一個解決方案來解決如何在另一個函數中保持this上下文的時候,你真正需要的其實就是 Function.prototype.bind(),只是你有可能仍然沒有意識到這點。
第一次遇到這個問題的時候,你可能傾向于將this設置到一個變量上,這樣你可以在改變了上下文之后繼續引用到它。很多人選擇使用 self, _this 或者 context 作為變量名稱(也有人使用 that)。這些方式都是有用的,當然也沒有什么問題。但是其實有更好、更專用的方式。
我們真正需要解決的問題是什么?
在下面的例子代碼中,我們可以名正言順地將上下文緩存到一個變量中:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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'
我們需要為回調函數的執行保持對 myObj 對象上下文的引用。 調用 that.specialFunction()讓我們能夠維持作用域上下文并且正確執行我們的函數。 然而使用 Function.prototype.bind() 可以有更加簡潔干凈的方式:
?
1 2 3 4 5 6 7 8 9 10 11 render: function () { this.getAsyncData(function () { this.specialFunction(); this.anotherSpecialFunction(); }.bind(this)); }我們剛才做了什么?
.bind()創建了一個函數,當這個函數在被調用的時候,它的 this 關鍵詞會被設置成被傳入的值(這里指調用bind()時傳入的參數)。因此,我們傳入想要的上下文,this(其實就是 myObj),到.bind()函數中。然后,當回調函數被執行的時候, this 便指向 myObj 對象。
如果有興趣想知道 Function.prototype.bind() 內部長什么樣以及是如何工作的,這里有個非常簡單的例子:
?
新聞熱點
疑難解答