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

<!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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%20TYPE%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2F%3C!%5BCDATA%5B%20%0D%0A%0D%0A%2F%2F%20caller%20demo%20%0D%0Afunction%20callerDemo(b)%20%7B%20%0D%0A%20%20%20%20if%20(callerDemo.caller)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20a%3D%20callerDemo.caller.toString()%3B%20%0D%0A%20%20%20%20%20%20%20%20alert(a)%3B%20%0D%0A%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22this%20is%20a%20top%20function%22)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20handleCaller()%20%7B%20%0D%0A%20%20%20%20callerDemo()%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20callee%20demo%20%0D%0Afunction%20calleeDemo()%20%7B%20%0D%0A%20%20%20%20alert(arguments.callee)%3B%20%0D%0A%7D%20%0D%0Afunction%20calleeLengthDemo(arg1%2C%20arg2)%20%7B%20%0D%0A%20%20%20%20if%20(arguments.length%3D%3Darguments.callee.length)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20window.alert(%22%E9%AA%8C%E8%AF%81%E5%BD%A2%E5%8F%82%E5%92%8C%E5%AE%9E%E5%8F%82%E9%95%BF%E5%BA%A6%E6%AD%A3%E7%A1%AE%EF%BC%81%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20return%3B%20%0D%0A%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22%E5%AE%9E%E5%8F%82%E9%95%BF%E5%BA%A6%EF%BC%9A%22%20%2Barguments.length)%3B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22%E5%BD%A2%E5%8F%82%E9%95%BF%E5%BA%A6%EF%BC%9A%20%22%20%2Barguments.callee.length)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20simple%20call%20demo%20%0D%0Afunction%20simpleCallDemo(arg)%20%7B%20%0D%0A%20%20%20%20window.alert(arg)%3B%20%0D%0A%7D%20%0D%0Afunction%20handleSPC(arg)%20%7B%20%0D%0A%20%20%20%20simpleCallDemo.call(this%2C%20arg)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20simple%20apply%20demo%20%0D%0Afunction%20simpleApplyDemo(arg)%20%7B%20%0D%0A%20%20%20%20window.alert(arg)%3B%20%0D%0A%7D%20%0D%0Afunction%20handleSPA(arg)%20%7B%20%0D%0A%20%20%20%20simpleApplyDemo.apply(this%2C%20arguments)%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20inherit%20%0D%0Afunction%20base()%20%7B%20%0D%0A%20%20%20%20this.member%20%3D%20%22never-online%22%3B%20%0D%0A%20%20%20%20this.method%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(this.member)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20extend()%20%7B%20%0D%0A%20%20%20%20base.call(this)%3B%20%0D%0A%20%20%20%20window.alert(member)%3B%20%0D%0A%20%20%20%20window.alert(this.method)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20advanced%20apply%20demo%20%0D%0Afunction%20adApplyDemo(x)%20%7B%20%0D%0A%20%20%20%20return%20(%22this%20is%20never-online%2C%20BlueDestiny%20'%22%20%2B%20x%20%2B%20%22'%20demo%22)%3B%20%0D%0A%7D%20%0D%0Afunction%20handleAdApplyDemo(obj%2C%20fname%2C%20before)%20%7B%20%0D%0A%20%20var%20oldFunc%20%3D%20obj%5Bfname%5D%3B%20%0D%0A%20%20obj%5Bfname%5D%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20return%20oldFunc.apply(this%2C%20before(arguments))%3B%20%0D%0A%20%20%7D%3B%20%0D%0A%7D%20%0D%0Afunction%20hellowordFunc(args)%20%7B%20%0D%0A%20%20args%5B0%5D%20%3D%20%22hello%20%22%20%2B%20args%5B0%5D%3B%20%0D%0A%20%20return%20args%3B%20%0D%0A%7D%20%0D%0Afunction%20applyBefore()%20%7B%20%0D%0A%20%20%20%20alert(adApplyDemo(%22world%22))%3B%20%0D%0A%7D%20%0D%0Afunction%20applyAfter()%20%7B%20%0D%0A%20%20%20%20handleAdApplyDemo(this%2C%20%22adApplyDemo%22%2C%20hellowordFunc)%3B%20%0D%0A%20%20%20%20alert(adApplyDemo(%22world%22))%3B%20%2F%2F%20Hello%20world!%20%0D%0A%7D%20%0D%0A%2F%2F%5D%5D%3E%20%0D%0A%3C%2FSCRIPT%3E"> 
<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 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 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 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 href="http://www.never-online.net" _ewebeditor_ta_href="http%3A%2F%2Fwww.never-online.net">http://www.never-online.net</a>  
  </h4> 
</div> 
</div> 
</BODY> 
</HTML>

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

教程首页更多教程