答案： <!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> <!-- body, pre, td { font-size: 0.8em; font-family: verdana; } h1 { font-size: 2.0em; text-align: center; } h6 { font-size: 1.0em; text-align: center; } .block { border: 1px solid #003366; background-color: #eeeeee; padding: 20px; width: 95%; text-align: left; line-height: 130%; margin-bottom: 15px; } .code { color: #666666; } .copyright { text-align: center; font-size: 0.8em; font-weight: normal; } --> </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); } } // 易做图 call demo function 易做图CallDemo(arg) { window.alert(arg); } function handleSPC(arg) { 易做图CallDemo.call(this, arg); } // 易做图 apply demo function 易做图ApplyDemo(arg) { window.alert(arg); } function handleSPA(arg) { 易做图ApplyDemo.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 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"> // 易做图 call demo function 易做图CallDemo(arg) { window.alert(arg); } function handleSPC(arg) { 易做图CallDemo.call(this, arg); } // 易做图 apply demo function 易做图ApplyDemo(arg) { window.alert(arg); } function handleSPA(arg) { 易做图ApplyDemo.apply(this, arguments); } </pre> <input type="button" onclick="handleSPC('never-online')" value="handle 易做图 call"/> <input type="button" onclick="handleSPA('BlueDestiny')" value="handle 易做图 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的"真正"作</pre><p>上一个：<a href="/show/8462f4774d45fe42.htm">JS中简单的实现像C#中using功能（有源码下载）</a><br/>下一个：<a href="/show/5ad69ad6a047371d.htm">鼠标滚轮编程</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/9aa7cb79ed901902.htm"><img src='/upload/2013111519/20121207113719115.jpg' width=105 height=105><br/>ExtJs4 用户登录窗口</a></li><li><a href="/show/d6830c4b40b3b6de.htm"><img src='/upload/2013111520/20120629024221519.jpg' width=105 height=105><br/>js计算表格的值(例如购物车中)</a></li><li><a href="/show/a7fd74cb4a69b39f.htm"><img src='/upload/2013111603/20110528165927762.gif' width=105 height=105><br/>Ext.NET加入自定义验证JS函数</a></li><li><a href="/show/ba8b3a563a001aaa.htm"><img src='/upload/2013111604/20121210014139820.jpg' width=105 height=105><br/>关于free如何知道要释放内存空间的长度问题</a></li><li><a href="/show/bbdc174133e02cfa.htm"><img src='/upload/2013111604/20121128094139730.png' width=105 height=105><br/>jsp课程 --JSP标准标签库</a></li><li><a href="/show/d673a1ed1d11eb16.htm"><img src='/upload/2013111604/1346083594_1533.jpg' width=105 height=105><br/>jsp实现数据保存</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/b636313fd0bf206e.htm">js把图片转换成 base64代码</a></dd><dd><a target="_blank" href="/show/f104aaf60c037fed.htm">js把base代码转换成图片</a></dd><dd><a target="_blank" href="/show/02f65fc48980b1fe.htm">JS 将 base64编码的图片转化为图片文件</a></dd><dd><a target="_blank" href="/show/5044556d492a3bd0.htm">js中的定时器</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>