apply()和call()和bind()

一、方法定義

call, apply都屬於Function.prototype的一個方法,它是JavaScript引擎內在實現的,由於屬於Function.prototype,因此每一個Function對象實例,也就是每一個方法都有call, apply屬性.既然做爲方法的屬性,那它們的使用就固然是針對方法的了.這兩個方法是容易混淆的,由於它們的做用同樣,只是使用方式不一樣.

call方法: 
語法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
定義：調用一個對象的一個方法，以另外一個對象替換當前對象。 
說明： 
call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。 
若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。 

apply方法： 
語法：apply([thisObj[,argArray]]) 
定義：應用某一對象的一個方法，用另外一個對象替換當前對象。 
說明： 
若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。 
若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj， 而且沒法被傳遞任何參數

call, apply做用就是借用別人的方法來調用,就像調用本身的同樣.

它們的不一樣之處：

• apply：最多隻能有兩個參數——新this對象和一個數組 argArray。若是給該方法傳遞多個參數，則把參數都寫進這個數組裏面，固然，即便只有一個參數，也要寫進數組裏面。若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj， 而且沒法被傳遞任何參數。
• call：則是直接的參數列表，主要用在js對象各方法互相調用的時候，使當前this實例指針保持一致,或在特殊狀況下須要改變this指針。若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。 
• 更簡單地說，apply和call功能同樣，只是傳入的參數列表形式不一樣：如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])
• 如：
  add.apply(sub,[3,1]);
  //add.call(sub,3,1);

var a={
n:1,
m:2,
add:function(){
return this.n+this.m;
}
}
var b={n:3,m:4

}
console.log(a.add.call(b));//b.n+b.m=7

function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}

function Cat(){
this.name = "Cat";
}

var animal = new Animal();
var cat = new Cat();

//經過call或apply方法，將本來屬於Animal對象的showName()方法交給對象cat來使用了。
//輸入結果爲"Cat"
animal.showName.call(cat,",");
animal.showName.apply(cat,[]);

爲了鞏固加深記憶，下面列舉一些經常使用用法：

一、數組之間追加

1 2 3 4

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] */

二、獲取數組中的最大值和最小值

1 2 3

var   numbers = [5, 458 , 120 , -215 ];  var  maxInNumbers = Math.max.apply(Math, numbers),    //458      maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215);  //458

number 自己沒有 max 方法，可是 Math 有，咱們就能夠藉助 call 或者 apply 使用其方法。

三、驗證是不是數組（前提是toString()方法沒有被重寫過）

1 2 3

functionisArray(obj){       return  Object.prototype.toString.call(obj) ===  '[object Array]'  ; }

四、類（僞）數組使用數組方法

1	var  domNodes = Array.prototype.slice.call(document.getElementsByTagName( "*" ));

Javascript中存在一種名爲僞數組的對象結構。比較特別的是 arguments 對象，還有像調用 getElementsByTagName , document.childNodes 之類的，它們返回 NodeList對象都屬於僞數組。不能應用 Array下的 push , pop 等方法。

可是咱們能經過 Array.prototype.slice.call 轉換爲真正的數組的帶有 length 屬性的對象，這樣 domNodes 就能夠應用 Array 下的全部方法了。

 

   深刻理解運用apply、call

下面就借用一道面試題，來更深刻的去理解下 apply 和 call 。

定義一個 log 方法，讓它能夠代理 console.log 方法，常見的解決方法是：

1 2 3 4 5

function  log(msg)　{    console.log(msg); } log(1);     //1 log(1,2);     //1

上面方法能夠解決最基本的需求，可是當傳入參數的個數是不肯定的時候，上面的方法就失效了，這個時候就能夠考慮使用 apply 或者 call，注意這裏傳入多少個參數是不肯定的，因此使用apply是最好的，方法以下：

1 2 3 4 5

function  log(){    console.log.apply(console, arguments); }; log(1);     //1 log(1,2);     //1 2

接下來的要求是給每個 log 消息添加一個"(app)"的前輟，好比：

1	log( "hello world" );     //(app)hello world

該怎麼作比較優雅呢?這個時候須要想到arguments參數是個僞數組，經過 Array.prototype.slice.call 轉化爲標準數組，再使用數組方法unshift，像這樣：

1 2 3 4 5 6

function  log(){    var  args = Array.prototype.slice.call(arguments);    args.unshift( '(app)' );      console.log.apply(console, args); };

 

 

bind

說完了 apply 和 call ，再來講說bind。bind() 方法與 apply 和 call 很類似，也是能夠改變函數體內 this 的指向。

MDN的解釋是：bind()方法會建立一個新函數，稱爲綁定函數，當調用這個綁定函數時，綁定函數會以建立它時傳入 bind()方法的第一個參數做爲 this，傳入 bind() 方法的第二個以及之後的參數加上綁定函數運行時自己的參數按照順序做爲原函數的參數來調用原函數。

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

1 2 3 4 5 6 7 8 9 10

var  foo = {      bar : 1,      eventBind:  function (){          var  _this =  this ;          $( '.someClass' ).on( 'click' , function (event) {              /* Act on the event */              console.log(_this.bar);      //1          });      } }

因爲 Javascript 特有的機制，上下文環境在 eventBind:function(){ } 過渡到 $('.someClass').on('click',function(event) { }) 發生了改變，上述使用變量保存 this 這些方式都是有用的，也沒有什麼問題。固然使用 bind() 能夠更加優雅的解決這個問題：

1 2 3 4 5 6 7 8 9

var  foo = {      bar : 1,      eventBind:  function (){          $( '.someClass' ).on( 'click' , function (event) {              /* Act on the event */              console.log( this .bar);       //1          }.bind( this ));      } }

在上述代碼裏，bind() 建立了一個函數，當這個click事件綁定在被調用的時候，它的 this 關鍵詞會被設置成被傳入的值（這裏指調用bind()時傳入的參數）。所以，這裏咱們傳入想要的上下文 this(其實就是 foo )，到 bind() 函數中。而後，當回調函數被執行的時候， this 便指向 foo 對象。再來一個簡單的栗子：

1 2 3 4 5 6 7 8 9

var  bar =  function (){ console.log( this .x); } var  foo = { x:3 } bar();  // undefined var  func = bar.bind(foo); func();  // 3

這裏咱們建立了一個新的函數 func，當使用 bind() 建立一個綁定函數以後，它被執行的時候，它的 this 會被設置成 foo ， 而不是像咱們調用 bar() 時的全局做用域。

有個有趣的問題，若是連續 bind() 兩次，亦或者是連續 bind() 三次那麼輸出的值是什麼呢？像這樣：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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 ，而非期待中的 4 和 5 。緣由是，在Javascript中，屢次 bind() 是無效的。更深層次的緣由， bind() 的實現，至關於使用函數在內部包了一個 call / apply ，第二次 bind() 至關於再包住第一次 bind() ,故第二次之後的 bind 是沒法生效的。