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

一直都沒太明白apply()與call()的具體使用原理,今日閑來無事,決定好好研究一番。

JavaScript中的每一個(gè)Function對(duì)象都有一個(gè)apply()方法和一個(gè)call()方法,它們的語法分別為:

/*apply()方法*/

function.apply(thisObj[, argArray])

/*call()方法*/

function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它們各自的定義:

????apply:應(yīng)用某一對(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ì)象的方法。

它們的共同之處:

都“可以用來代替另一個(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。如果沒有提供argArray和thisObj任何一個(gè)參數(shù),那么Global對(duì)象將被用作thisObj,并且無法被傳遞任何參數(shù)。

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

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

示例代碼:

(1)基本用法

functionadd(a,b){returna+b;

}functionsub(a,b){returna-b;

}vara1 = add.apply(sub,[4,2]);//sub調(diào)用add的方法vara2 = sub.apply(add,[4,2]);

alert(a1);//6alert(a2);//2

/*call的用法*/

vara1 = add.call(sub,4,2);

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

functionAnimal(name){this.name =name;this.showName =function(){

alert(this.name);

}

}functionCat(name){

Animal.apply(this,[name]);

}varcat =newCat("咕咕");

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

(3)多重繼承

functionClass10(){this.showSub =function(a,b){

alert(a-b);

}

}functionClass11(){this.showAdd =function(a,b){

alert(a+b);

}

}functionClass12(){

Class10.apply(this);

Class11.apply(this);//Class10.call(this);//Class11.call(this);}varc2 =newClass12();

c2.showSub(3,1);//2c2.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)來解決 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)闆]有對(duì)象去調(diào)用這個(gè)方法,我只需要用這個(gè)方法幫我運(yùn)算,得到返回的結(jié)果就行,所以直接傳遞了一個(gè)null過去。

用這種方法也可以實(shí)現(xiàn)得到數(shù)組中的最小項(xiàng):Math.min.apply(null,array)

(2)Array.prototype.push可以實(shí)現(xiàn)兩個(gè)數(shù)組的合并

同樣push方法沒有提供push一個(gè)數(shù)組,但是它提供了push(param1,param2...paramN),同樣也可以用apply來轉(zhuǎn)換一下這個(gè)數(shù)組,即:

1.var arr1=new Array("1","2","3");

2.var arr2=new Array("4","5","6");

3.Array.prototype.push.apply(arr1,arr2); ? ?//得到合并后數(shù)組的長度,因?yàn)閜ush就是返回一個(gè)數(shù)組的長度

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

?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,682評(píng)論 0 4
  • 開始看到j(luò)avascript的函數(shù)apply和call時(shí),非常的模糊,由于最近在找工作應(yīng)對(duì)面試,在網(wǎng)上看到一些文章...
    小搖歌閱讀 712評(píng)論 0 0
  • 一直都沒太明白apply()與call()的具體使用原理,今日閑來無事,決定好好研究一番。 JavaScript中...
    神秘者007閱讀 321評(píng)論 0 1
  • Js apply方法詳解 我在一開始看到j(luò)avascript的函數(shù)apply和call時(shí),非常的模糊,看也看不懂,...
    阿力阿貍123閱讀 863評(píng)論 0 1
  • 用小車推著女兒走到樓梯口才發(fā)現(xiàn):放在小車后簍兒里的傘不見了。 一把玫瑰紅色的小傘,女兒從一歲半一直玩到三歲,每天出...
    工作與養(yǎng)娃兼顧的女人閱讀 505評(píng)論 0 2

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