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

2019-11-21 02:22:01

字體：大中小

來源：轉載

供稿：網友

<!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="http://m.survivalescaperooms.com/"/> <META NAME="Keywords" CONTENT="never-online, blueDestiny"> <META NAME="Description" CONTENT="http://www.never-online.net"> <STYLE>  </STYLE> </HEAD> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //<![CDATA[ // caller demo function callerDemo(b) {     if (callerDemo.caller) {         var a= callerDemo.caller.toString();         alert(a);     } else {         alert("this is a top function");     } } function handleCaller() {     callerDemo(); } // callee demo 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);     } } // 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); } // inherit function base() {     this.member = "never-online";     this.method = function() {         alert(this.member);     } } function extend() {     base.call(this);     window.alert(member);     window.alert(this.method); } // 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! } //]]> </SCRIPT> <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="iwvjtn8m0"   class="block">   <h3> 1、caller </h3>   <h5> JScript參考中說明為：返回一個對函數的引用，該函數調用了當前函數。 如何理解這句話, 先來舉個簡單的例子：<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>上面的例子，可以看出，它就是返回一個調用數據的引用。(指向請求調用的函數) 也由此可以看出，當在這樣的情況下，onclick觸發事件的時候總是帶著匿名函數的 </h5> </div> </div> <div align="center">     <div   id="iwvjtn8m0"   class="block">         <h3> 2、callee </h3>         <h5> JScript參考中的說明為：返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文。</h5>         需要注意的是callee擁有length屬性，這個在有的時候用于驗證還是比較好的。</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可以用來打在執行函數，也就是指向被調用的函數。上面的例子就說明calee可以打印其本身，當然還有其它的一些用途。而length屬性中arguments.length是實參長度，arguments.callee.length是形參長度，由此可以判斷調用時形參長度是否和實參長度一致。</h5>     </div> <div align="center">     <div   id="iwvjtn8m0"   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參數可以是變量，而apply([thisObj[,argArray]])中的參數為數組集合。下面來看看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可以把當前的參數傳遞給另外一個函數的參數中，從而調用另一個函數的應用。有的時候這是一個很實用的方法，當然，用call或是apply（是參數或是數組），看實際情況而定了。     </h5>     <h4> 下面來看另一個應用 </h4>     <h5> call和apply還有一個技巧在里面，就是用call和apply應用另一個函數（類）以后，當前的函數（類）就具備了另一個函數（類）的方法或者是屬性，這也可以稱之為"繼承"。看下面示例。     </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方法，這樣原始的值將會被改變。或許有的朋友沒有發現有什么特別的，我在這里指明一下，當點擊左邊的按扭時，只有"this is never-online, BlueDestiny 'world' demo"， 當點擊右邊的按扭后，會現結果是"this is never-online, BlueDestiny 'hello world' demo"，再點點左邊的按扭，看看結果又會是什么呢？自己試試看:D，已經改寫了函數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需刷新才能執行]

上一篇：Javascript miscellanea -display data real time, using window.status

下一篇：Javascript - HTML的request類