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)用者不寫(xiě)在前面, 而是參數(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 = '我是全局變量';//定義全局變量xfunction 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(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章:
1. React+umi+typeScript創(chuàng)建項(xiàng)目的過(guò)程2. .Net core 的熱插拔機(jī)制的深入探索及卸載問(wèn)題求救指南3. ASP調(diào)用WebService轉(zhuǎn)化成JSON數(shù)據(jù),附j(luò)son.min.asp4. SharePoint Server 2019新特性介紹5. 三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介6. 解決ASP中http狀態(tài)跳轉(zhuǎn)返回錯(cuò)誤頁(yè)的問(wèn)題7. ASP中常用的22個(gè)FSO文件操作函數(shù)整理8. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)9. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過(guò)程解析10. ASP編碼必備的8條原則
