關於Function中的bind()範例詳解

前言

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物件綁定到retrieveX的this上，問題就解決了，不管它在何處調用，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函數設定初始值，因為不用改變list中this的指向，所以直接傳undefined，從第二個參數開始，就是要傳入list函數的值，list2和list3的回傳值很好的說明了一切。

我自己一般使用的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了，直接把setTimeout的this綁定到外層的this，這肯定是我們想要的！

更多關於Function中的bind()範例詳解相關文章請關注PHP中文網！