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

更新時間：2017年02月03日 08:25:47 作者：918之初

這篇文章主要介紹了理解javascript中的Function.prototype.bind的方法,具有一定參考價值，有興趣的可以了解一下。

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

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

首先看下面的代碼

var myObj = {

  specialFunction: function () {

  },

  anotherSpecialFunction: function () {

  },

  getAsyncData: function (cb) {
    cb();
  },

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

myObj.render();

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

TypeError: this.specialFunction is not a function

第二部分：問題剖析

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

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

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

  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綁定到了環(huán)境中。

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

var foo = {
  x: 3
}

var bar = function(){
  console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

下面的例子也是常見的：

this.x = 9;  // this refers to global "window" object here in the browser
var module = {
 x: 81,
 getX: function() { return this.x; }
};

module.getX(); // 81

var 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 x
var 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;
 };
}

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

您可能感興趣的文章: