快捷導(dǎo)航

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

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

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

前言

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

示例介紹

我們還是看看栗子比較好理解，舉個(gè)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)建一個(gè)新函數(shù)，將"this"綁定到module對(duì)象
// 新手可能會(huì)被全局的x變量和module里的屬性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

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

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

還是舉個(gè)栗子：

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

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

// 創(chuàng)建一個(gè)擁有預(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ù)很簡(jiǎn)單，把傳入的每個(gè)參數(shù)插入到一個(gè)數(shù)組里，我們用bind()給list函數(shù)設(shè)置初始值，因?yàn)椴挥酶淖?code>list中this的指向，所以直接傳undefined，從第二個(gè)參數(shù)開始，就是要傳入list函數(shù)的值，list2和list3的返回值很好的說(shuō)明了一切。

我自己一般使用的bind()的場(chǎng)景是配合setTimeout函數(shù)，因?yàn)樵趫?zhí)行setTimeout時(shí)，this會(huì)默認(rèn)指向window對(duì)象，在使用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)頂層定義一個(gè)that緩存this的指針，這樣不論怎么調(diào)用，that都是指向 Coder的實(shí)例，但是多定義一個(gè)變量總是讓人不太舒服。

使用bind()就簡(jiǎn)單多了：

 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é)

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

您可能感興趣的文章: