1.call/apply/bind方法的來源

　　首先，在使用call，apply，bind方法時，我們有必要知道這三個方法究竟是來自哪里？為什么可以使用的到這三個方法？

　　call，apply，bind這三個方法其實都是繼承自Function.prototype中的，屬于實例方法。

1 console.log(Function.prototype.hasOwnProperty('call')) //true 2 console.log(Function.prototype.hasOwnProperty('apply')) //true 3 console.log(Function.prototype.hasOwnProperty('bind')) //true

　　上面代碼中，都返回了true，表明三種方法都是繼承自Function.prototype的。當然，普通的對象，函數，數組都繼承了Function.prototype對象中的三個方法，所以這三個方法都可以在對象，數組，函數中使用。

　　關于繼承的概念，會在以后與大家分享。

?

2.Function.prototype.call()

　　函數實例的call方法，可以指定該函數內部this的指向（即函數執行時所在的作用域），然后在所指定的作用域中，調用該函數。并且會立即執行該函數。

　　看個例子來好好理解這段話。

1 var keith = {2 rascal: 1233 };4 5 var rascal = 456;6 7 function a() {8 console.log(this.rascal);9 } 10 11 a(); //456 12 a.call(); //456 13 a.call(null); //456 14 a.call(undefined); //456 15 a.call(this); //456 16 a.call(keith); //123

　　上面代碼中，a函數中的this關鍵字，如果指向全局對象，返回結果為456。可以看到，如果call方法沒有參數，或者參數為null或undefined或者this，則等同于指向全局對象。如果使用call方法將this關鍵字指向keith對象，也就是將該函數執行時所在的作用域為keith對象，返回結果為123。

　　call()方法可以傳遞兩個參數。第一個參數是指定函數內部中this的指向（也就是函數執行時所在的作用域），第二個參數是函數調用時需要傳遞的參數。

1 function keith(a, b) { 2 console.log(a + b); 3 } 4 5 keith.call(null, 1, 2); //3

　　第一個參數是必須的，可以是null，undefined，this，但是不能為空。設置為null，undefined，this表明函數keith此時處于全局作用域。第二個參數中必須一個個添加。而在apply中必須以數組的形式添加。

　　call方法的一個應用是調用對象的原生方法。也可以用于將類數組對象轉換為數組。

1 var obj = {};2 console.log(obj.hasOwnProperty('toString')); //false3 4 obj.hasOwnProperty = function() {5 return true;6 }7 8 console.log(obj.hasOwnProperty('toString')); //true9 10 console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false

　　上面代碼中，hasOwnProperty是obj對象繼承的方法，如果這個方法一旦被覆蓋，就不會得到正確結果。call方法可以解決這個方法，它將hasOwnProperty方法的原始定義放到obj對象上執行，這樣無論obj上有沒有同名方法，都不會影響結果。要注意的是，hasOwnProperty是Object.prototype原生對象的方法，而call是繼承自Function.prototype的方法。

　　

3.Function.prototype.apply()

　　apply方法的作用與call方法類似，也是改變this指向（函數執行時所在的作用域），然后在指定的作用域中，調用該函數。同時也會立即執行該函數。唯一的區別就是，它接收一個數組作為函數執行時的參數。

　　apply方法的第一個參數也是this所要指向的那個對象，如果設為null或undefined或者this，則等同于指定全局對象。第二個參數則是一個數組，該數組的所有成員依次作為參數，在調用時傳入原函數。原函數的參數，在call方法中必須一個個添加，但是在apply方法中，必須以數組形式添加。

　　看一下call，apply的細微差別。

1 function keith(a, b) { 2 console.log(a + b); 3 } 4 5 keith.call(null, 2, 3); //5 6 keith.apply(null, [2, 3]); //5

　　上面代碼中，第一個參數為null，指向全局作用域；第二個參數傳入的形式稍稍不同。

　　apply方法有以下應用。

?

　　3.1：找出數組中的最大數

1 var a = [2, 4, 5, 7, 8, 10]; 2 3 console.log(Math.max.apply(null, a)); //10 4 console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10

　　Javascript中是沒有提供找出數組中最大值的方法的，結合使用繼承自Function.prototype的apply和Math.max方法，就可以返回數組的最大值。

　　

　　3.2：將數組的空元素變為undefined

　　通過apply方法，利用Array構造函數將數組的空元素變成undefined。

1 console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]

　　空元素與undefined的差別在于，數組的forEach方法會跳過空元素，但是不會跳過undefined和null。因此，遍歷內部元素的時候，會得到不同的結果。

var a = [1, , 3];a.forEach(function(index) {console.log(index); //1,3 ，跳過了空元素。})Array.apply(null,a).forEach(function(index){console.log(index); 1,undefined,3 ，將空元素設置為undefined})

?

　　3.3：轉換類似數組的對象

　　另外，利用數組對象的slice方法，可以將一個類似數組的對象（比如arguments對象）轉為真正的數組。當然，slice方法的一個重要應用，就是將類似數組的對象轉為真正的數組。call和apply都可以實現該應用。

1 console.log(Array.prototype.slice.apply({0:1,length:1})); //[1] 2 console.log(Array.prototype.slice.call({0:1,length:1})); //[1] 3 console.log(Array.prototype.slice.apply({0:1,length:2})); //[1,undefined] 4 console.log(Array.prototype.slice.call({0:1,length:2})); //[1,undefined] 1 function keith(a,b,c){ 2 return arguments; 3 } 4 5 console.log(Array.prototype.slice.call(keith(2,3,4))); //[2,3,4]

　　上面代碼的call，apply方法的參數都是對象，但是返回結果都是數組，這就起到了將對象轉成數組的目的。從上面代碼可以看到，這個方法起作用的前提是，被處理的對象必須有length屬性，以及相對應的數字鍵。

?

　　

4.Function.prototype.bind()

　　bind方法用于指定函數內部的this指向（執行時所在的作用域），然后返回一個新函數。bind方法并非立即執行一個函數。

1 var keith = {2 a: 1,3 count: function() {4 console.log(this.a++);5 }6 };7 8 keith.count(); //19 keith.count(); //2 10 keith.count(); //3

　　上面代碼中，如果this.a指向keith對象內部的a屬性，如果這個方法賦值給另外一個變量，調用時就會出錯。

1 var keith = { 2 a: 1, 3 count: function() { 4 console.log(this.a++); 5 } 6 }; 7 8 var f = keith.count; 9 f(); //NaN

　　上面代碼中，如果把count方法賦值給f變量，那么this對象指向不再是keith對象了，而是window對象。而window.a默認為undefined，進行遞增運算之后undefined++就等于NaN。

　　為了解決這個問題，可以使用bind方法，將keith對象里的this綁定到keith對象上，或者是直接調用。

1 var f = keith.count.bind(keith); 2 f(); //1 3 f(); //2 4 f(); //3 1 keith.count.bind(keith)() //1 2 keith.count.bind(keith)() //2 3 keith.count.bind(keith)() //3

　　當然，this也可以綁定到其他對象上。

1 var obj = { 2 a: 100 3 }; 4 var f = keith.count.bind(obj); 5 f(); //100 6 f(); //101 7 f(); //102

　　同樣，我們也可以給bind方法傳遞參數，第一個參數如果為null或者undefined或者this，會將函數內部的this對象指向全局環境；第二個為調用時需要的參數，并且傳遞參數的形式與call方法相同。

1 function keith(a, b) { 2 return a + b; 3 } 4 console.log(keith.apply(null,[1,4])); //5 5 console.log(keith.call(null,1,4)); //5 6 console.log(keith.bind(null, 1, 4)); //keith() 7 console.log(keith.bind(null, 1, 4)()); //5

　　上面代碼中，可以看出call，apply，bind三者的區別：call和apply方法都是在調用之后立即執行的。而bind調用之后是返回原函數，需要再調用一次才行，有點像閉包的味道，如果對閉包概念不熟悉，可以瀏覽這兩篇文章：javascript--函數參數與閉包--詳解，javascript中重要概念-閉包-深入理解。

?

5.綁定回調函數的對象

　　在這篇文章javascript之 this 關鍵字詳解中，有談及到如果在回掉函數中使用this對象，那么this對象是會指向DOM對象，也就是button對象。如果要解決回調函數中this指向問題，可以用如下方法。

1 var o = {2 f: function() {3 console.log(this === o);4 }5 }6 7 $('#button').on('click', function() {8 o.f.apply(o);9 //或者 o.f.call(o); 10 //或者 o.f.bind(o)(); 11 });

　　點擊按鈕以后，控制臺將會顯示true。由于apply方法（或者call方法）不僅綁定函數執行時所在的對象，還會立即執行函數（而bind方法不會立即執行，注意區別），因此不得不把綁定語句寫在一個函數體內。

?

6.call，apply，bind方法的聯系和區別

　　其實用于指定函數內部的this指向的問題，這三個方法都差不多，只是存在形式上的差別。讀者可以將以上的例子用三種方法嘗試用三種方法實現。

　　總結一下call，apply，bind方法：

　　a：第一個參數都是指定函數內部中this的指向（函數執行時所在的作用域），然后根據指定的作用域，調用該函數。

　　b：都可以在函數調用時傳遞參數。call，bind方法需要直接傳入，而apply方法需要以數組的形式傳入。

　　c：call，apply方法是在調用之后立即執行函數，而bind方法沒有立即執行，需要將函數再執行一遍。有點閉包的味道。

　　d：改變this對象的指向問題不僅有call，apply，bind方法，也可以使用that變量來固定this的指向。

轉載于:https://www.cnblogs.com/Jade-Liu18831/p/9580410.html

總結

以上是生活随笔為你收集整理的call，apply，bind的用法与区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。