以下內(nèi)容會分為如下小節(jié)：

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

2.Function.prototype.call()

3.Function.prototype.apply()

　　3.1：找出數(shù)組中的最大數(shù)

　　3.2：將數(shù)組的空元素變?yōu)閡ndefined

　　3.3：轉(zhuǎn)換類似數(shù)組的對象

4.Function.prototype.bind()

5.綁定回調(diào)函數(shù)的對象

6.call，apply，bind方法的聯(lián)系和區(qū)別

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

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

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

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

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

關(guān)于繼承的概念，會在以后與大家分享。

2.Function.prototype.call()

　函數(shù)實例的call方法，可以指定該函數(shù)內(nèi)部this的指向（即函數(shù)執(zhí)行時所在的作用域），然后在所指定的作用域中，調(diào)用該函數(shù)。并且會立即執(zhí)行該函數(shù)。

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

 var keith = {
 rascal: 123
 };
 var rascal = 456;
 function a() {
 console.log(this.rascal);
 }
 a(); //456
 a.call(); //456
 a.call(null); //456
 a.call(undefined); //456
 a.call(this); //456
 a.call(keith); //123

上面代碼中，a函數(shù)中的this關(guān)鍵字，如果指向全局對象，返回結(jié)果為456?？梢钥吹?，如果call方法沒有參數(shù)，或者參數(shù)為null或undefined或者this，則等同于指向全局對象。如果使用call方法將this關(guān)鍵字指向keith對象，也就是將該函數(shù)執(zhí)行時所在的作用域為keith對象，返回結(jié)果為123。

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

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

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

call方法的一個應(yīng)用是調(diào)用對象的原生方法。也可以用于將類數(shù)組對象轉(zhuǎn)換為數(shù)組。

var obj = {};
 console.log(obj.hasOwnProperty('toString')); //false
 obj.hasOwnProperty = function() {
 return true;
 }
 console.log(obj.hasOwnProperty('toString')); //true
 console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false

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

3.Function.prototype.apply()

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

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

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

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

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

apply方法有以下應(yīng)用。

3.1：找出數(shù)組中的最大數(shù)

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

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

3.2：將數(shù)組的空元素變?yōu)閡ndefined

通過apply方法，利用Array構(gòu)造函數(shù)將數(shù)組的空元素變成undefined。

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

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

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 ，將空元素設(shè)置為undefined
 })

3.3：轉(zhuǎn)換類似數(shù)組的對象

另外，利用數(shù)組對象的slice方法，可以將一個類似數(shù)組的對象（比如arguments對象）轉(zhuǎn)為真正的數(shù)組。當(dāng)然，slice方法的一個重要應(yīng)用，就是將類似數(shù)組的對象轉(zhuǎn)為真正的數(shù)組。call和apply都可以實現(xiàn)該應(yīng)用。

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

上面代碼的call，apply方法的參數(shù)都是對象，但是返回結(jié)果都是數(shù)組，這就起到了將對象轉(zhuǎn)成數(shù)組的目的。從上面代碼可以看到，這個方法起作用的前提是，被處理的對象必須有l(wèi)ength屬性，以及相對應(yīng)的數(shù)字鍵。

4.Function.prototype.bind()

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

var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 keith.count(); //1
 keith.count(); //2
 keith.count(); //3

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

 var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 var f = keith.count;
 f(); //NaN

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

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

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

 當(dāng)然，this也可以綁定到其他對象上。

 var obj = {
 a: 100
 };
 var f = keith.count.bind(obj);
 f(); //100
 f(); //101
 f(); //102

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

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

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

5.綁定回調(diào)函數(shù)的對象

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

var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });

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

6.call，apply，bind方法的聯(lián)系和區(qū)別

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

　　總結(jié)一下call，apply，bind方法：

　　a：第一個參數(shù)都是指定函數(shù)內(nèi)部中this的指向（函數(shù)執(zhí)行時所在的作用域），然后根據(jù)指定的作用域，調(diào)用該函數(shù)。

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

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

　　d：改變this對象的指向問題不僅有call，apply，bind方法，也可以使用that變量來固定this的指向。如有疑問，請訪問 javascript中this關(guān)鍵字詳解

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論