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