DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 關於Function中的bind()示例詳解
關於Function中的bind()示例詳解
編輯:關於JavaScript     

前言

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

示例介紹

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

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

module.getX(); // 返回 81

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

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

這裡很明顯,我們在window對象下調用retrieveX,得到的結果肯定是window下的x,我們把module對象綁定到retrieveXthis上,問題就解決了,不管它在何處調用,this都是指向module對象。

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

還是舉個栗子:

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

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

// 創建一個擁有預設初始參數的函數
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函數很簡單,把傳入的每個參數插入到一個數組裡,我們用bind()list函數設置初始值,因為不用改變listthis的指向,所以直接傳undefined,從第二個參數開始,就是要傳入list函數的值,list2list3的返回值很好的說明了一切。

我自己一般使用的bind()的場景是配合setTimeout函數,因為在執行setTimeout時,this會默認指向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

在函數內頂層定義一個that緩存this的指針,這樣不論怎麼調用,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了,直接把setTimeoutthis綁定到外層的this,這肯定是我們想要的!

最後附上參考地址:

Function.prototype.bind()

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對的支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved