理解javascript中的Function.prototype.bind的方法，prototype.bind

理解javascript中的Function.prototype.bind的方法，prototype.bind

在初學Javascript時，我們也許不需要擔心函數綁定的問題，但是當我們需要在另一個函數中保持內容物件this時，就會遇到相應的問題了，我見過很多人處理這種問題都是先將this賦值給一個變數（比如self、_this、that等），尤其是var that = this是我見的最多的，這樣當你改變環境之後就可以使用它。這些都是可以的，但是還有一種更好的、更專有的方法，那就是使用Function.prototype.bind，下面進行詳盡的講解。　　

第一部分：需要解決的問題

首先看下面的代碼

var myObj = {  specialFunction: function () {  },  anotherSpecialFunction: function () {  },  getAsyncData: function (cb) {    cb();  },  render: function () {this.getAsyncData(function () {      this.specialFunction();      this.anotherSpecialFunction();    });  }};myObj.render();

這裡我希望建立一個對象，包含了前面兩個普通的方法；第三個方法可以傳遞一個函數，傳入的這個函數立即執行；最後一個方法會調用myObj對象的getAsyncData方法，這裡使用了this，然後在getAsyncData方法中傳入了一個函數，這個函數繼續調用這個對象的前兩個方法，仍使用了this，這時很多人實際上就可以看出問題所在了，將上述代碼輸入控制台，得到下面的結果：

TypeError: this.specialFunction is not a function

第二部分：問題剖析

在對象中render方法中的this的確是指向myObj對象的，所以我們可以通過this.getAsyncData來調用這個對象中的函數，但是當我們給其傳遞函數作為參數時，這裡的this就指向了全域環境window了，因為全域環境中沒有對象中的前兩個方法，所以才會報錯。

第三部分：解決問題的幾種方式

所以我們需要做的就是正確調用對象中的前兩個方法 ，很多人使用的方法便是首先在對象的環境中擷取this賦值給另一個變數，這時就可以在後面的環境中調用了，如下所示：

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

雖然這種方法是可行的，但是使用Function.prototype.bind()會使代碼更清晰、易懂，如下所示：

render: function () {  this.getAsyncData(function () {    this.specialFunction();    this.anotherSpecialFunction();  }.bind(this));}

這裡我們就成功地把this綁定到了環境中。

下面是另外一個簡單的例子：

var foo = {  x: 3}var bar = function(){  console.log(this.x);}bar(); // undefinedvar boundFunc = bar.bind(foo);boundFunc(); // 3

下面的例子也是常見的：

this.x = 9;  // this refers to global "window" object here in the browservar module = { x: 81, getX: function() { return this.x; }};module.getX(); // 81var retrieveX = module.getX;retrieveX();  // returns 9 - The function gets invoked at the global scope// Create a new function with 'this' bound to module// New programmers might confuse the// global var x with module's property xvar boundGetX = retrieveX.bind(module);boundGetX(); // 81

第四部分：瀏覽器支援

但是這個方法在IE8及以下是不被支援的，所以我們可以使用MDN提供的方法來使得IE低版本支援.bind()方法：

if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) {  if (typeof this !== "function") {   // closest thing possible to the ECMAScript 5 internal IsCallable function   throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");  }  var aArgs = Array.prototype.slice.call(arguments, 1),    fToBind = this,    fNOP = function () {},    fBound = function () {     return fToBind.apply(this instanceof fNOP && oThis                 ? this                 : oThis,                aArgs.concat(Array.prototype.slice.call(arguments)));    };  fNOP.prototype = this.prototype;  fBound.prototype = new fNOP();  return fBound; };}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。