JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別實(shí)例分析
本文實(shí)例講述了JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別。分享給大家供大家參考,具體如下:
直接調(diào)用
直接調(diào)用函數(shù)是最常見(jiàn) 最普通的方式,直接以函數(shù)附加的對(duì)象作為調(diào)用者, 在函數(shù)后括號(hào)內(nèi)傳入?yún)?shù)來(lái)調(diào)用函數(shù)
例如:
window.alert("測(cè)試代碼");
其中調(diào)用者如果是window可以省略, 即直接alert("測(cè)試代碼");
以call() 方法調(diào)用函數(shù)
語(yǔ)法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);
新同學(xué)看來(lái)好像直接調(diào)用就夠了, 其實(shí)不然, 直接調(diào)用函數(shù)方式簡(jiǎn)單易用但不夠靈活, 有些時(shí)候調(diào)用函數(shù)時(shí)需要?jiǎng)討B(tài)地傳入一個(gè)函數(shù)的引用,此時(shí)為了動(dòng)態(tài)地調(diào)用函數(shù),就需要使用call方法來(lái)調(diào)用了
舉個(gè)例子:
<script type="text/javascript">
var each =function(array,fn)
{
for(var index in array)
{
fn.call(null,index,array[index]);
}
}
each([4,20,3],function (index,ele)
{
document.write("第"+index+"個(gè)元素是"+ele+"<br/>");
}
);
</script>
乍看可能比較暈, 注意fn.call語(yǔ)句, call調(diào)用的格式是在參數(shù)第一個(gè)填調(diào)用者,后邊按順序輸入?yún)?shù), 參數(shù)形式比較特別, 與直接調(diào)用不同,調(diào)用者不寫在前面, 而是參數(shù)第一項(xiàng). 格式: fn.call(obj,args);
看到這里大家應(yīng)該會(huì)有疑問(wèn), call到底和直接調(diào)用有什么區(qū)別, 區(qū)別就在于call調(diào)用修改了this指針的指向, 如果被調(diào)用的函數(shù)里壓根沒(méi)用到this也就沒(méi)有什么區(qū)別了
再舉一個(gè)被調(diào)用函數(shù)有this指針的例子:
var x = "我是全局變量"; //定義全局變量x
function a(){ //定義函數(shù)類結(jié)構(gòu)a
this.x = "我是在函數(shù)類結(jié)構(gòu)a中聲明的哦";
}
//定義普通函數(shù),彈出當(dāng)前指針?biāo)淖兞縳的值
function f(){
alert (this.x);
}
//返回值為“我是在函數(shù)類結(jié)構(gòu)a中聲明的哦”
f.call(new a());
我的理解是,f.call(new a())就是把函數(shù)(其實(shí)也是對(duì)象)f復(fù)制到被調(diào)用對(duì)象“new a()”下面去解析,事實(shí)上和下面這段代碼的解析結(jié)果一樣:
function a(){
this.x = "我是在函數(shù)類結(jié)構(gòu)a中聲明的哦";
alert(this.x);
}
a();
事實(shí)上,是在調(diào)用f.call()的時(shí)候,修改了f()中的this指向。本來(lái),f中的this.a,this.b屬性都是自身的,但是通過(guò)f.call()調(diào)用時(shí),傳入了一個(gè)新的對(duì)象e()(this),這樣,將e綁定到了f的this中,本來(lái)是給f增加的屬性,加到了e中。(e與e(),f與f()都是等價(jià)的)有點(diǎn)類似于“繼承”,但是這個(gè)應(yīng)該叫 JS中對(duì)象冒充
以apply()方式調(diào)用函數(shù)
apply() 方法與call()方法的功能節(jié)本相似 ,都可以用來(lái)動(dòng)態(tài)地調(diào)用函數(shù). apply()與call()的區(qū)別如下:
- 通過(guò)call()調(diào)用函數(shù)時(shí)必須在括號(hào)中詳細(xì)地列出每個(gè)參數(shù)
- apply()動(dòng)態(tài)地調(diào)用函數(shù)時(shí), 需要以數(shù)組的形式一次性傳入所有調(diào)用參數(shù)
語(yǔ)法:apply([thisObj [,argArray] ]);
比如下面的兩個(gè)語(yǔ)句是相等的:
myfun.call(window,12,13); myfun.capply(window,[12,13]);
在修改this指針這點(diǎn)上,apply()與call()也保持一致,
大體上來(lái)說(shuō)apply()與call()只在傳參形式上有些差別而已.
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript:new 一個(gè)函數(shù)和直接調(diào)用函數(shù)的區(qū)別分析
- JavaScript函數(shù)的4種調(diào)用方法實(shí)例分析
- JavaScript 函數(shù)的定義-調(diào)用、注意事項(xiàng)
- 深入學(xué)習(xí) JavaScript中的函數(shù)調(diào)用
- 淺談js函數(shù)三種定義方式 & 四種調(diào)用方式 & 調(diào)用順序
- javascript函數(shù)的四種調(diào)用模式
- Javascript 函數(shù)的四種調(diào)用模式
- 深入理解JavaScript中的尾調(diào)用(Tail Call)
- javascript使用call調(diào)用微信API
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之調(diào)用call()與apply()的方法詳解
- javaScript call 函數(shù)的用法說(shuō)明
- JavaScript中的apply和call函數(shù)詳解
相關(guān)文章
JS實(shí)現(xiàn)光滑展開(kāi)合攏的菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)光滑展開(kāi)合攏的菜單效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷并改變頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JavaScript庫(kù)之vanilla-tilt使用教程(一個(gè)平滑的3D傾斜庫(kù))
vanilla-tilt.js是Javascript中一個(gè)平滑的3D傾斜庫(kù),可以讓網(wǎng)頁(yè)的一些控件變得動(dòng)態(tài)起來(lái),下面這篇文章主要給大家介紹了關(guān)于JavaScript庫(kù)之vanilla-tilt使用的相關(guān)資料,需要的朋友可以參考下2023-02-02
JavaScript Date對(duì)象應(yīng)用實(shí)例分享
這篇文章主要分享了JavaScript Date對(duì)象應(yīng)用實(shí)例,獲取日期時(shí)間,倒計(jì)時(shí)功能實(shí)現(xiàn),限時(shí)搶購(gòu)活動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
Javascript基于對(duì)象三大特性(封裝性、繼承性、多態(tài)性)
這篇文章主要介紹了Javascript基于對(duì)象三大特性,包括封裝性、繼承性、多態(tài)性,感興趣的小伙伴們可以參考一下2016-01-01
JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法
這篇文章主要介紹了JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法,涉及JavaScript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
JavaScript閉包原理與用法學(xué)習(xí)筆記
這篇文章主要介紹了JavaScript閉包原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript閉包相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11

