JavaScript bind call apply 的區別和使用

在講這個之前要理解一些概念，這些概念很重要，有人說過學會了javascript 的this 就基本會了一半的javascript

在 javascript 中，call 和 apply 都是為了改變某個函數運行時的上下文（context）而存在的，換句話說，就是為了改變函數體內部 this 的指向。

JavaScript 的一大特點是函數存在：

定義時上下文

運行時上下文

上下文是可以改變

如果要深入理解這個知識要開個javascript 內存管理機制和運行原理了，這裡就不做過多的介紹了。

function Fruits() {}
 
Fruits.prototype = {
 color: "red",
 printf: function() {
 console.log("My color is " + this.color);
 }
}
 
var apple = new Fruits;
apple.printf(); //My color is red
// 改變this
banana = {
 color: "yellow"
}
apple.printf.call(banana); //My color is yellow 

apple.printf.apply(banana); //My color is yellow
// 通過call apply這兩個來改變上下文的this指向

call ，apply 方法是一樣的只是傳遞的參數不同而已，call（obj,args1，args2）

apply(obj,[args1,args2]) ，這樣很明顯看出區別了吧！

數組追加

var array1 = [12 , "foo" , {name "Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.apply(array1, array2); 
/* array1 值為 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
// 這樣子優雅的解決了push 方法子傳遞一個參數的問題了。當然數組合並有contact 方法來合併的
// 比較數組的大小，使用 apply 作為傳遞數組的必選方法。 
var numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
// 判斷是否是數組 前提是toString 方法沒有被重寫。
functionisArray(obj){ 
 return Object.prototype.toString.call(obj) === '[object Array]' ;
}
// 將偽數組轉成數組
// ES6 有方法 Array.from(args) 轉化
var dom = Array.prototype.slice.call(document.getElementsByTagName("div"));
// 這樣 domNodes 就可以使用pop() ,push() 等方法了。

深入理解call apply

封裝console.log 方法

function log(){
 console.log.apply(console, arguments);
};
log(1); //1
log(1,2); //1 2
// 這是一道面試題這樣的方法可以說是最優雅的了
// 我也是今天才知道他們兩能力這麼大
function log(){
 var args = Array.prototype.slice.call(arguments);
 var tim = new Date.getTime() 
 args.unshift(tim);
 console.log.apply(console, args);
};
// 這個就可以優雅的給log 方法帶上一個時間搓的前綴啦，是不是非常的棒。函數的不定參 arguments 是偽數組來的
//寫了這麼多相信各位已經明白了，我現在才知道這兩個方法的強大，以前一直認為只是改變this這麼簡單，其實也改變this啊！

bind 的詳細方法

再來說說bind。bind() 方法與 apply 和 call 很相似，也是可以改變函數體內 this 的指向。

我的解釋是：bind()方法會創建一個新函數，稱為綁定函數，當調用這個綁定函數時，綁定函數會以創建它時傳入 bind()方法的第一個參數作為 this，傳入 bind() 方法的第二個以及以後的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

直接來看看具體如何使用，在常見的單體模式中，通常我們會使用 _this , that , self 等保存 this ，這樣我們可以在改變了上下文之後繼續引用到它。 像這樣：

var foo = {
 bar : 1,
 eventBind: function(){
 var _this = this;
 $('.someClass').on('click',function(event) {
 /* Act on the event */
 console.log(_this.bar); //1
 });
 }
}
// 使用 bind 方法
var foo = {
 bar : 1,
 eventBind: function(){
 $('.someClass').on('click',function(event) {
 /* Act on the event */
 console.log(this.bar); //1
 }.bind(this));
 }
}
// 多個bind
var bar = function(){
 console.log(this.x);
}
var foo = {
 x:3
}
var sed = {
 x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
 
var fiv = {
 x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3 第一個值，第二個失效了

bind 兼容寫法

Function.prototype.bind= function(obj){
 if (Function.prototype.bind) 
 return Function.prototype.bind;
 var _self = this, args = arguments;
 return function() {
 _self.apply(obj, Array.prototype.slice.call(args, 1));
 }
}
// 可能大家會有疑惑，這裡為什麼return 一個函數回去，因為bind()不是調用就執行的所以在這裡返回一個函數。
// MDN的方法
if (!Function.prototype.bind) {
 Function.prototype.bind = function(oThis) {
 if (typeof this !== 'function') {
 // closest thing possible to the ECMAScript 5
 // internal IsCallable function
 throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
 }
 var aArgs = Array.prototype.slice.call(arguments, 1),
 fToBind = this,
 fNOP = function() {},
 fBound = function() {
 return fToBind.apply(this instanceof fNOP
 ? this
 : oThis,
 // 獲取調用時(fBound)的傳參.bind 返回的函數入參往往是這麼傳遞的
 aArgs.concat(Array.prototype.slice.call(arguments)));
 };
 // 維護原型關係
 if (this.prototype) {
 // Function.prototype doesn't have a prototype property
 fNOP.prototype = this.prototype; 
 }
 fBound.prototype = new fNOP();
 return fBound;
 };
}
// 也就是加了比較嚴格的判斷。 

從bind 的源碼中可以看出跟 call ，apply 的卻別了吧！

bind調用完成後不執行，call，apply是馬上執行。相互之間是互通的

bind不兼容（IE5，6，7，8）

參考文獻：

https://www.cnblogs.com/coco1s/p/4833199.html

https://blog.csdn.net/u012443286/article/details/78633540