快捷導(dǎo)航

關(guān)于Function中的bind()示例詳解

更新時間：2016年12月02日 09:23:59 投稿：daisy

其實所謂bind顧名思義就是綁定。bind()方法會創(chuàng)建一個新函數(shù)，當(dāng)這個新函數(shù)被調(diào)用時，它的this值是傳遞給bind()的第一個參數(shù)，它的參數(shù)是bind()的其他參數(shù)和其原本的參數(shù)。這么說可能很多人都糊涂了，下面通過這篇文章的示例來給大家詳細(xì)的介紹下吧。

前言

bind()接受無數(shù)個參數(shù)，第一個參數(shù)是它生成的新函數(shù)的this指向，比如我傳個window，不管它在何處調(diào)用，這個新函數(shù)中的this就指向window，這個新函數(shù)的參數(shù)就是bind()的第二個、第三個、第四個....第n個參數(shù)加上它原本的參數(shù)。（行吧，我自己都蒙圈了）

示例介紹

我們還是看看栗子比較好理解，舉個bind()最基本的使用方法：

this.x = 9; 
var module = {
 x: 81,
 getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在這種情況下，"this"指向全局作用域

// 創(chuàng)建一個新函數(shù)，將"this"綁定到module對象
// 新手可能會被全局的x變量和module里的屬性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

這里很明顯，我們在window對象下調(diào)用retrieveX，得到的結(jié)果肯定是window下的x，我們把module對象綁定到retrieveX的this上，問題就解決了，不管它在何處調(diào)用，this都是指向module對象。

還有bind()的其他參數(shù)，相信第一次接觸bind()的朋友看到上面的定義都會蒙圈。

還是舉個栗子：

function list() {
 return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 創(chuàng)建一個擁有預(yù)設(shè)初始參數(shù)的函數(shù)
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});

var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

list函數(shù)很簡單，把傳入的每個參數(shù)插入到一個數(shù)組里，我們用bind()給list函數(shù)設(shè)置初始值，因為不用改變list中this的指向，所以直接傳undefined，從第二個參數(shù)開始，就是要傳入list函數(shù)的值，list2和list3的返回值很好的說明了一切。

我自己一般使用的bind()的場景是配合setTimeout函數(shù)，因為在執(zhí)行setTimeout時，this會默認(rèn)指向window對象，在使用bind()之前，我是這么做的：

 function Coder(name) {
  var that = this;
  that.name = name;
  that.getName = function() {
   console.log(that.name)
  };
  that.delayGetName = function() {
   setTimeout(that.getName,1000)
  };
 }
 var me = new Coder('Jins')
 me.delayGetName()//延遲一秒輸出Jins

在函數(shù)內(nèi)頂層定義一個that緩存this的指針，這樣不論怎么調(diào)用，that都是指向 Coder的實例，但是多定義一個變量總是讓人不太舒服。

使用bind()就簡單多了：

 function Coder(name) {
  this.name = name;
  this.getName = function() {
   console.log(this.name)
  };
  this.delayGetName = function() {
   setTimeout(this.getName.bind(this),1000)
  };
 }
 var me = new Coder('Jins')
 me.delayGetName()//延遲一秒輸出Jins

這樣就OK了，直接把setTimeout的this綁定到外層的this，這肯定是我們想要的！

最后附上參考地址：

Function.prototype.bind()

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: