Function.prototype.bind()方法用法簡單介紹

本章節通過程式碼例項簡單對prototype.bind()方法做一下介紹，希望能夠給對它還比較陌生的朋友帶來一定幫助。

建議在閱讀本章節之前事先參閱javascript this用法詳解和javascript prototype原型簡單介紹一章節。 

大家可能遇到過這樣的情況，為了在其他的函式中保持this上下文的一致性，會使用下面類似的程式碼:

[JavaScript] 純文字檢視 複製程式碼
var that=this;

也就是將this指向物件的引用賦值給變數that，以供後面使用。

下面看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var obj={
  show:function(){
  },
  done:function(){
  },
  getOther:function(func){
    func()
  },
  render:function(){
    var that = this;
    this.getOther(function () {
      that.show();
      that.done();
    });
  }
}

在以上程式碼中，將this指向物件的引用賦值給that，這樣當呼叫obj.render()方法的時候，能夠確保呼叫的show()方法和done方法是屬於obj物件的，否則是呼叫的window物件上的方法。但是上面的方式稍顯繁瑣，ES5也提供了Function.prototype.bind()，解決上面的問題也就更為輕鬆，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
render:function(){
  var that = this;
  this.getOther(function () {
    this.show();
    this.done();
  }.bind(this));
}

上面程式碼利用bind()實現了我們的要求，下面就介紹一下它的語法:

語法結構:

[JavaScript] 純文字檢視 複製程式碼
fun.bind(thisArg[, arg1[, arg2[, ...]]])

此方法會建立一個新函式,稱為繫結函式.當呼叫這個繫結函式時,繫結函式會以建立它時傳入bind方法的第一個引數作為this,傳入bind方法的第二個以及以後的引數加上繫結函式執行時本身的引數按照順序作為原函式的引數來呼叫原函式.

bind()的程式碼我們可以大概描述如下:

[JavaScript] 純文字檢視 複製程式碼
Function.prototype.bind=function(thisArg,arg1,arg2) {
  var fn = this;
  return function() {
    return fn.apply(scope,arg1,arg2);
  };
}

也就是說修改了函式的呼叫物件。