前端值得一探究竟特輯 --- 快速掌握bind、call、apply的區別

bind和call、apply最大的區別

call 和 apply 的主要作用，是改變對象的執行上下文，並且是立即執行的。
bind 也能改變對象的執行上下文，它與 call 和 apply 不同的是，返回值是一個函數，並且需要稍後再調用一下，纔會執行。

call和apply的共同點

1. call和apply都能夠改變函數執行時的上下文，將一個對象的方法交給另一個對象來執行，並且是立即執行的。
2. 調用 call 和 apply 的對象，必須是一個函數 ，Function。
3. call 和apply 的第一個參數，都是一個對象， Function 的調用者，將會指向這個對象。如果不傳，則默認爲全局對象 window。

call和apply的區別

就在第二個參數的不同形式上。

1. call 的寫法，第二個參數開始，可以接收任意個參數。每個參數會映射到相應位置的 Function 的參數上。

   Function.call(obj,[param1[,param2[,…[,paramN]]]])
   

2. apply 的寫法，第二個參數，必須是數組或者類數組，它們會被轉換成類數組，傳入 Function 中，並且會被映射到 Function 對應的參數上。

   Function.apply(obj[,argArray])
   

call和apply的應用

1. 對象繼承。subClass 通過 call 方法，繼承了 superClass 的 print 方法和 a 變量。

   function superClass () {
       this.a = 1;
       this.print = function () {
           console.log(this.a);
       }
   }
   function subClass () {
       superClass.call(this);
       this.print();
   }
   subClass();
   // 1
   

2. 借用方法。

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

3. 便捷記憶

   貓吃魚，狗吃肉，奧特曼打小怪獸。
   有天狗想吃魚了

   貓.吃魚.call(狗，魚)

   狗就吃到魚了

   貓成精了，想打怪獸

   奧特曼.打小怪獸.call(貓，小怪獸)

   貓也可以打小怪獸了

bind的特點

1. bind() 方法和call很像，第一個參數是this的指向，從第二個參數開始是接收的參數列表。只是bind會創建一個新的函數，並在調用新函數時，將第二個參數作爲原函數的參數序列的前若干項，將新函數返回，而並不會立即調用。
2. bind不兼容（IE5，6，7，8）

bind的寫法

Function.bind(thisArg[, arg1[, arg2[, ...]]])

bind的應用

1. 借用方法。

   function log(){
     return console.log.bind(console, ...arguments);
   };
   let k = log(1); // 不會調用
   k(); // 這裏纔會調用，輸出1