JavaScript bind()

bind方法可以建立與原來函式主體完全一致的新函式。

新函式也稱作繫結函式，既然被稱作繫結函式，自然會向其繫結一些新內容，後面會介紹。

此方法是ES5新增。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
fun.bind(thisArg[, arg1[, arg2[, ...]]])

引數解析:

（1）.fun：源函式，新建立的繫結函式體與其完全一樣。

（2）.thisArg：必需，繫結函式中this將指向它。

（3）.arg1-argN：可選，繫結函式預定義的引數。

特別說明：可以認為this和預定義的函式就是繫結到新函式的內容。

瀏覽器支援：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  age:4,
  show:function(){
    return this.webName;
  }
}
console.log(antzone.show());

呼叫antzone物件的show方法，列印結果是"螞蟻部落"。

很容易理解，因為this指向物件antzone。

如果感覺通過物件呼叫方法比較麻煩，想將其單獨拿出來呼叫。

程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  age:4,
  show:function(){
    return this.webName;
  }
}
let show=antzone.show;
console.log(show());

程式碼執行效果截圖如下：

此時，show函式this指向window，列印結果並非預期。

通過bind方法可以解決上述問題，程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  age:4,
  show:function(){
    return this.webName;
  }
}
let show=antzone.show;
let bindShow=show.bind(antzone);
console.log(bindShow());

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.show函式中的this原本指向window。

（2）.通過bind方法會以show函式為模板建立一個繫結函式，並將此函式的this指向antzone物件。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
  return Array.prototype.slice.call(arguments);
}
let bindFunc=func.bind(window,1,2);
console.log(bindFunc(3,4))

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.bind方法可以為新建立的函式預定義引數。

（2）.預定義引數的順序排列在為新函式傳遞的引數之前。

（3）.上述程式碼通過bind方法為新函式預定義兩個引數1與2。

（4）.為bindFunc函式傳遞兩個引數3與4，它們排列在1與2之後。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone() {
  this.webName=arguments[0];
  this.age=arguments[1];
}
let bindAntzone=Antzone.bind({},"螞蟻部落");
let ant=new bindAntzone(4);
console.log(ant.webName);
console.log(ant.age);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.新建立函式用作建構函式建立物件。

（2）.bind規定的this無效，但是預定義的引數依然有效。

特別說明：實際工作中不推薦使用繫結函式用作建構函式，上面僅是介紹其中的原理。