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

更新時間：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="vvxyksv9kd"   class="block">   <h3> 1、caller </h3>   <h5> JScript參考中說明為：返回一個對函數(shù)的引用，該函數(shù)調用了當前函數(shù)。 如何理解這句話, 先來舉個簡單的例子：<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>上面的例子，可以看出，它就是返回一個調用數(shù)據(jù)的引用。(指向請求調用的函數(shù)) 也由此可以看出，當在這樣的情況下，onclick觸發(fā)事件的時候總是帶著匿名函數(shù)的 </h5> </div> </div> <div align="center">     <div   id="vvxyksv9kd"   class="block">         <h3> 2、callee </h3>         <h5> JScript參考中的說明為：返回正被執(zhí)行的 Function 對象，也就是所指定的 Function 對象的正文。</h5>         需要注意的是callee擁有l(wèi)ength屬性，這個在有的時候用于驗證還是比較好的。</h5>         <pre class="code"> function calleeDemo() {     alert(arguments.callee); } function calleeLengthDemo(arg1, arg2) {     if (arguments.length==arguments.callee.length) {         window.alert("驗證形參和實參長度正確！");         return;     } else {         alert("實參長度：" +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ù)，也就是指向被調用的函數(shù)。上面的例子就說明calee可以打印其本身，當然還有其它的一些用途。而length屬性中arguments.length是實參長度，arguments.callee.length是形參長度，由此可以判斷調用時形參長度是否和實參長度一致。</h5>     </div> <div align="center">     <div   id="vvxyksv9kd"   class="block">         <h3> 3、call 和 apply</h3>         <h5> call方法JScript參考中的說明：調用一個對象的一個方法，以另一個對象替換當前對象。call([thisObj[,arg1[, arg2[,   [,.argN]]]]])，但是沒有示例         </h5>         <h5> apply方法JScript參考中的說明：應用某一對象的一個方法，用另一個對象替換當前對象。apply([thisObj[,argArray]]) </h5>         <h5> 實際上這兩個的作用幾乎是相同的，要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg參數(shù)可以是變量，而apply([thisObj[,argArray]])中的參數(shù)為數(shù)組集合。下面來看看call, apply的具體應用 </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可以把當前的參數(shù)傳遞給另外一個函數(shù)的參數(shù)中，從而調用另一個函數(shù)的應用。有的時候這是一個很實用的方法，當然，用call或是apply（是參數(shù)或是數(shù)組），看實際情況而定了。     </h5>     <h4> 下面來看另一個應用 </h4>     <h5> call和apply還有一個技巧在里面，就是用call和apply應用另一個函數(shù)（類）以后，當前的函數(shù)（類）就具備了另一個函數(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> 再看一個apply的應用 </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> 需要注意的是，要先點"原始的adApplyDemo('world')"按鈕，如果先點"應用后的adApplyDemo('world')"按扭，會先應用了apply方法，這樣原始的值將會被改變?；蛟S有的朋友沒有發(fā)現(xiàn)有什么特別的，我在這里指明一下，當點擊左邊的按扭時，只有"this is never-online, BlueDestiny 'world' demo"， 當點擊右邊的按扭后，會現(xiàn)結果是"this is never-online, BlueDestiny 'hello world' demo"，再點點左邊的按扭，看看結果又會是什么呢？自己試試看:D，已經(jīng)改寫了函數(shù)adApplyDemo。這個例子則說明了call和apply的"真正"作用了。     </h5>     <input type="button" onclick="applyBefore()" value="原始的adApplyDemo('world')"/>     <input type="button" onclick='applyAfter()' value="應用后的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í)行]

您可能感興趣的文章: