快捷導(dǎo)航

Javascript - 全面理解 caller，callee，call，apply

更新時(shí)間：2007年01月09日 00:00:00 作者：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> How to - Javascript Call, apply, caller - http://www.never-online.net </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="never-online, blueDestiny"> <META NAME="Keywords" CONTENT="never-online, blueDestiny"> <META NAME="Description" CONTENT="http://www.never-online.net"> <STYLE>  </STYLE> </HEAD>  <BODY> <h1> Javascript - 全面理解 caller，callee，call，apply </h1> <h6> Author: BlueDestiny, never-online From: http://www.never-online.net, Blog.csdn.net/BlueDestiny </h6> <div align="center"> <div   id="wppm3vysvbp"   class="block">   <h3> 1、caller </h3>   <h5> JScript參考中說明為：返回一個(gè)對(duì)函數(shù)的引用，該函數(shù)調(diào)用了當(dāng)前函數(shù)。 如何理解這句話, 先來舉個(gè)簡單的例子：<h5>   <pre class="code"> // caller demo { function callerDemo() {     if (callerDemo.caller) {         var a= callerDemo.caller.toString();         alert(a);     } else {         alert("this is a top function");     } } function handleCaller() {     callerDemo(); }   </pre>     <input type="button" onclick="callerDemo()" value="callerDemo"/>     <input type="button" onclick="handleCaller()" value="handleCaller"/>     <h5>上面的例子，可以看出，它就是返回一個(gè)調(diào)用數(shù)據(jù)的引用。(指向請求調(diào)用的函數(shù)) 也由此可以看出，當(dāng)在這樣的情況下，onclick觸發(fā)事件的時(shí)候總是帶著匿名函數(shù)的 </h5> </div> </div> <div align="center">     <div   id="wppm3vysvbp"   class="block">         <h3> 2、callee </h3>         <h5> JScript參考中的說明為：返回正被執(zhí)行的 Function 對(duì)象，也就是所指定的 Function 對(duì)象的正文。</h5>         需要注意的是callee擁有l(wèi)ength屬性，這個(gè)在有的時(shí)候用于驗(yàn)證還是比較好的。</h5>         <pre class="code"> function calleeDemo() {     alert(arguments.callee); } function calleeLengthDemo(arg1, arg2) {     if (arguments.length==arguments.callee.length) {         window.alert("驗(yàn)證形參和實(shí)參長度正確！");         return;     } else {         alert("實(shí)參長度：" +arguments.length);         alert("形參長度： " +arguments.callee.length);     } }         </pre>         <input type="button" onclick="calleeDemo()" value="handleCallee"/>         <input type="button" onclick="calleeLengthDemo()" value="handleCalleeLength"/>         <h5> 從上面的例子可以看出，callee可以用來打在執(zhí)行函數(shù)，也就是指向被調(diào)用的函數(shù)。上面的例子就說明calee可以打印其本身，當(dāng)然還有其它的一些用途。而length屬性中arguments.length是實(shí)參長度，arguments.callee.length是形參長度，由此可以判斷調(diào)用時(shí)形參長度是否和實(shí)參長度一致。</h5>     </div> <div align="center">     <div   id="wppm3vysvbp"   class="block">         <h3> 3、call 和 apply</h3>         <h5> call方法JScript參考中的說明：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。call([thisObj[,arg1[, arg2[,   [,.argN]]]]])，但是沒有示例         </h5>         <h5> apply方法JScript參考中的說明：應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。apply([thisObj[,argArray]]) </h5>         <h5> 實(shí)際上這兩個(gè)的作用幾乎是相同的，要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg參數(shù)可以是變量，而apply([thisObj[,argArray]])中的參數(shù)為數(shù)組集合。下面來看看call, apply的具體應(yīng)用 </h5>     <pre class="code"> // simple call demo function simpleCallDemo(arg) {     window.alert(arg); } function handleSPC(arg) {     simpleCallDemo.call(this, arg); } // simple apply demo function simpleApplyDemo(arg) {     window.alert(arg); } function handleSPA(arg) {     simpleApplyDemo.apply(this, arguments); }     </pre>     <input type="button" onclick="handleSPC('never-online')" value="handle simple call"/>     <input type="button" onclick="handleSPA('BlueDestiny')" value="handle simple apply"/>     <h5> 從上面簡單的例子可以看出，call和apply可以把當(dāng)前的參數(shù)傳遞給另外一個(gè)函數(shù)的參數(shù)中，從而調(diào)用另一個(gè)函數(shù)的應(yīng)用。有的時(shí)候這是一個(gè)很實(shí)用的方法，當(dāng)然，用call或是apply（是參數(shù)或是數(shù)組），看實(shí)際情況而定了。     </h5>     <h4> 下面來看另一個(gè)應(yīng)用 </h4>     <h5> call和apply還有一個(gè)技巧在里面，就是用call和apply應(yīng)用另一個(gè)函數(shù)（類）以后，當(dāng)前的函數(shù)（類）就具備了另一個(gè)函數(shù)（類）的方法或者是屬性，這也可以稱之為"繼承"?？聪旅媸纠?。     </h5>     <pre class="code"> // inherit function base() {     this.member = "never-online";     this.method = function() {         window.alert(this.member);     } } function extend() {     base.call(this);     window.alert(member);     window.alert(this.method); }     </pre>     <input type="button" onclick="extend()" value="inherited"/>     <h5> 上面的例子可以看出，通過call之后，extend可以繼承到base的方法和屬性。 </h5>     <h4> 再看一個(gè)apply的應(yīng)用 </h4>     <pre class="code"> // advanced apply demo function adApplyDemo(x) {     return ("this is never-online, BlueDestiny '" + x + "' demo"); } function handleAdApplyDemo(obj, fname, before) {   var oldFunc = obj[fname];   obj[fname] = function() {     return oldFunc.apply(this, before(arguments));   }; } function hellowordFunc(args) {   args[0] = "hello " + args[0];   return args; } function applyBefore() {     alert(adApplyDemo("world")); } function applyAfter() {     handleAdApplyDemo(this, "adApplyDemo", hellowordFunc);     alert(adApplyDemo("world")); // Hello world! }     </pre>     <h5> 需要注意的是，要先點(diǎn)"原始的adApplyDemo('world')"按鈕，如果先點(diǎn)"應(yīng)用后的adApplyDemo('world')"按扭，會(huì)先應(yīng)用了apply方法，這樣原始的值將會(huì)被改變。或許有的朋友沒有發(fā)現(xiàn)有什么特別的，我在這里指明一下，當(dāng)點(diǎn)擊左邊的按扭時(shí)，只有"this is never-online, BlueDestiny 'world' demo"， 當(dāng)點(diǎn)擊右邊的按扭后，會(huì)現(xiàn)結(jié)果是"this is never-online, BlueDestiny 'hello world' demo"，再點(diǎn)點(diǎn)左邊的按扭，看看結(jié)果又會(huì)是什么呢？自己試試看:D，已經(jīng)改寫了函數(shù)adApplyDemo。這個(gè)例子則說明了call和apply的"真正"作用了。     </h5>     <input type="button" onclick="applyBefore()" value="原始的adApplyDemo('world')"/>     <input type="button" onclick='applyAfter()' value="應(yīng)用后的adApplyDemo('world')"/>     </div> </div>   <h4 class="copyright">     Power By BlueDestiny, never-online,      <a >http://www.never-online.net</a>    </h4> </div> </div> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: