apply()與call()的區(qū)別

  • JavaScript中的每一個(gè)Function對(duì)象都有一個(gè)apply()方法和一個(gè)call()方法,它們的語(yǔ)法分別為:
/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);
它們各自的定義:

apply:調(diào)用一個(gè)對(duì)象的一個(gè)方法,用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。例如:B.apply(A, arguments);即A對(duì)象應(yīng)用B對(duì)象的方法。

call:調(diào)用一個(gè)對(duì)象的一個(gè)方法,用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。例如:B.call(A, args1,args2);即A對(duì)象調(diào)用B對(duì)象的方法。

它們的共同之處:

都可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法,將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛蓆hisObj指定的新對(duì)象”。

它們的不同之處:

apply:最多只能有兩個(gè)參數(shù)——新this對(duì)象和一個(gè)數(shù)組argArray。如果給該方法傳遞多個(gè)參數(shù),則把參數(shù)都寫進(jìn)這個(gè)數(shù)組里面,當(dāng)然,即使只有一個(gè)參數(shù),也要寫進(jìn)數(shù)組里。如果argArray不是一個(gè)有效的數(shù)組或arguments對(duì)象,那么將導(dǎo)致一個(gè)TypeError。如果沒(méi)有提供argArray和thisObj任何一個(gè)參數(shù),那么Global對(duì)象將被用作thisObj,并且無(wú)法被傳遞任何參數(shù)。

call:它可以接受多個(gè)參數(shù),第一個(gè)參數(shù)與apply一樣,后面則是一串參數(shù)列表。這個(gè)方法主要用在js對(duì)象各方法相互調(diào)用的時(shí)候,使當(dāng)前this實(shí)例指針保持一致,或者在特殊情況下需要改變this指針。如果沒(méi)有提供thisObj參數(shù),那么 Global 對(duì)象被用作thisObj。

實(shí)際上,apply和call的功能是一樣的,只是傳入的參數(shù)列表形式不同。

實(shí)例代碼:

(1) 基本用法

function add(a,b){
  return a+b;  
}
function sub(a,b){
  return a-b;  
}
/*apply的用法*/
var a1 = add.apply(sub,[4,2]);  //sub調(diào)用add的方法
var a2 = sub.apply(add,[4,2]);
alert(a1);  //6     
alert(a2);  //2

/*call的用法*/
var a1 = add.call(sub,4,2);

(2)實(shí)現(xiàn)繼承

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

function Cat(name){
  Animal.apply(this,[name]);    
}

var cat = new Cat("咕咕");
cat.showName();

/*call的用法*/
Animal.call(this,name);

(3) 多重繼承

function Class10(){
  this.showSub = function(a,b){
        alert(a - b);
    }   
}

function Class11(){
  this.showAdd = function(a,b){
        alert(a + b);
    }  
}

function Class12(){
  Class10.apply(this);
  Class11.apply(this);   
  // Class10.call(this);
  //Class11.call(this);  
}

var c2 = new Class12();
c2.showSub(3,1);    //2
c2.showAdd(3,1);    //4
apply的一些其他巧妙用法

(1) Math.max 可以實(shí)現(xiàn)得到數(shù)組中最大的一項(xiàng):
因?yàn)镸ath.max不支持Math.max([param1,param2])也就是數(shù)組,但是它支持Math.max(param1,param2...),所以可以根據(jù)apply的特點(diǎn)來(lái)解決 var max=Math.max.apply(null,array),這樣就輕易的可以得到一個(gè)數(shù)組中的最大項(xiàng)(apply會(huì)將一個(gè)數(shù)組轉(zhuǎn)換為一個(gè)參數(shù)接一個(gè)參

數(shù)的方式傳遞給方法)

這塊在調(diào)用的時(shí)候第一個(gè)參數(shù)給了null,這是因?yàn)闆](méi)有對(duì)象去調(diào)用這個(gè)方法,我只需要用這個(gè)方法幫我運(yùn)算,得到返回的結(jié)果就行,所以直接傳遞了一個(gè)null過(guò)去。

用這種方法也可以實(shí)現(xiàn)得到數(shù)組中的最小項(xiàng):Math.min.apply(null,array)
(2)Array.prototype.push可以實(shí)現(xiàn)兩個(gè)數(shù)組的合并
同樣push方法沒(méi)有提供push一個(gè)數(shù)組,但是它提供了push(param1,param2...paramN),同樣也可以用apply來(lái)轉(zhuǎn)換一下這個(gè)數(shù)組,即:

var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);    //得到合并后數(shù)組的長(zhǎng)度,因?yàn)閜ush就是返回一個(gè)數(shù)組的長(zhǎng)度

也可以這樣理解,arr1調(diào)用了push方法,參數(shù)是通過(guò)apply將數(shù)組轉(zhuǎn)換為參數(shù)列表的集合

通常在什么情況下,可以使用apply類似Math.max等之類的特殊用法:

一般在目標(biāo)函數(shù)只需要n個(gè)參數(shù)列表,而不接收一個(gè)數(shù)組的形式,可以通過(guò)apply的方式巧妙地解決這個(gè)問(wèn)題。

//求數(shù)組中的最大項(xiàng)
    var arr =[1,3,5,7,8,4,9,10];
    var max = Math.max.apply(null,arr);
    alert(max);
    
    //求數(shù)組中的最小項(xiàng)
    var min = Math.min.apply(null,arr);
    alert(min);
    
    //合并兩個(gè)數(shù)組并返回新數(shù)組的長(zhǎng)度
    var arr1 = new  Array("1","3","5","7","9");
    var arr2 = new Array("2","4","6","8");
    console.debug(Array.prototype.push.apply(arr1,arr2)); //返回?cái)?shù)組長(zhǎng)度
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一直都沒(méi)太明白apply()與call()的具體使用原理,今日閑來(lái)無(wú)事,決定好好研究一番。 JavaScript中...
    AKZhang閱讀 373評(píng)論 0 0
  • 它們各自的定義: apply:調(diào)用一個(gè)對(duì)象的一個(gè)方法,用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。例如:B.apply(A, arg...
    chasing_dream閱讀 1,258評(píng)論 0 0
  • 開(kāi)始看到j(luò)avascript的函數(shù)apply和call時(shí),非常的模糊,由于最近在找工作應(yīng)對(duì)面試,在網(wǎng)上看到一些文章...
    小搖歌閱讀 713評(píng)論 0 0
  • JavaScript中的每一個(gè)Function對(duì)象都有一個(gè)apply()方法和一個(gè)call()方法,它們的共同之處...
    皮卡乒乓閱讀 330評(píng)論 0 0
  • 比如說(shuō)從標(biāo)題欄中取出對(duì)應(yīng)的按鈕 最近總寫成 self.titlesView[index] 這樣是錯(cuò)的,正確的寫法s...
    要加油啊小和尚閱讀 725評(píng)論 0 49

友情鏈接更多精彩內(nèi)容