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

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> Javascript - 全面理解 caller，callee，call，apply

編輯：JavaScript基礎知識

<!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>

<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>

<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>

<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')"/> 
     
 
  <h4 class="copyright"> 
    Power By BlueDestiny, never-online,  
    http://www.never-online.net  
  </h4> 
 
 
</BODY> 
</HTML>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:客戶端腳本中常常出現的一些問題和調試技巧
下一頁:貼一個在Mozilla中常用的Javascript代碼

JavaScript基礎知識

JavaScript精粹總結: 數據類型JavaScript 是弱類型語言，但並不是沒有類型，JavaScript可以識別下面
js hover 定時器(實例代碼): 復制代碼代碼如下:$(#showComp tr:not(.stlisttitle)).hover(
9.10 本章總結: 關於JavaScript的數值操作並不是很多，對於Math對象中重要的屬性和方法，還是要記一下。

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

小編推薦

Javascript閉包函數入門很容易實例區別onClick和onDBClick兩事件方法一個簡單的javascript正則表達式例子 Websocket協議詳解及簡單實例代碼 JS之mouseover和mouseenter javascript之Boolean類型對象 JavaScript入門之基本函數詳解 js格式化時間小結編寫Js代碼要注意的幾條規則 JavaScript中對DOM節點的訪問、創建、修改、刪除

DIV CSS 佈局教程網

相關文章