详解 Javascript callee,caller , call, apply

来源：互联网发布：手机淘宝代理一件代发编辑：程序博客网时间：2024/06/11 19:21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>详解 Javascript callee,caller , call, apply</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>
<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);
}
// callee length
function calleeLen(x,y) {
alert(arguments.callee);
alert(arguments.callee.length);
}
function calleeLengthDemo(arg1, arg2) {
  alert("实参长度：" +arguments.length);
  alert("形参长度： " +arguments.callee.length);
if (arguments.length==arguments.callee.length) {
  window.alert("验证形参和实参长度正确！");
} else {
  window.alert("验证形参和实参长度不相等！");
}
  return;
}

// 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("base:"+this.member);
}
}
function extend() {
base.call(this);
window.alert(member);
window.alert(this.member);
window.alert("extend:"+this.method);
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(this["adApplyDemo"]);
alert(adApplyDemo("world"));
alert(this["adApplyDemo"]("Gu Laicheng"));
}
function applyAfter() {
alert(this["adApplyDemo"]);
alert(this["adApplyDemo"]("Gu Laicheng"));
handleAdApplyDemo(this, "adApplyDemo", hellowordFunc);
alert(this["adApplyDemo"]);
alert(adApplyDemo("world")); // Hello world!
}
//]]>

window.alert1=function(x)
{
// temp[0]=ob.offsetLeft+left;
// temp[1]=ob.offsetTop+top+ob.offsetHeight+add;

var g=document.getElementById("glc");
g.innerText = x;
g.style.left=document.body.scrollWidth-600;
g.style.top=document.body.scrollTop+120;
g.style.display="block";
}

</script>
</head>
<body>

<h1> 详解 Javascript callee,caller , call, apply</h1>
<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();
}
<font color=red>
< input onclick="callerDemo()" value="callerDemo" type="button">
< input onclick="handleCaller()" value="handleCaller" type="button">

</font></pre>
<input onclick="callerDemo()" value="callerDemo" type="button">
<input onclick="handleCaller()" value="handleCaller" type="button">
</h5><h5>上面的例子，可以看出，它就是返回一个调用数据的引用。(指向请求调用的函数) 也由此可以看出，当在这样的情况下，onclick触发事件的时候总是带着匿名函数的 </h5>
</div>
</div>
<a name="callee"></a>
<div align="center">
<div class="block">
  <h3> 2、callee </h3>
  <h5> JScript参考中的说明为：返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。</h5>
  需要注意的是callee拥有length属性，这个在有的时候用于验证还是比较好的。
  <pre class="code">
function calleeDemo() {
alert(arguments.callee);
}
function calleeLen(x,y) {
alert(arguments.callee);
alert(arguments.callee.length);
}
function calleeLengthDemo(arg1, arg2) {
  alert("实参长度：" +arguments.length);
  alert("形参长度： " +arguments.callee.length);
if (arguments.length==arguments.callee.length) {
  window.alert("验证形参和实参长度正确！");
} else {
  window.alert("验证形参和实参长度不相等！");
}
  return;
}
<font color=red>
  < input onclick="calleeDemo()" value="handleCallee" type="button">
  < input onclick="calleeLen()" value="calleeLen" type="button">
  < input onclick="calleeLen(1,2,3)" value="calleeLen" type="button">
  < input onclick="calleeLengthDemo()" value="handleCalleeLength" type="button">
  < input onclick="calleeLengthDemo(1,2)" value="handleCalleeLength" type="button">
  </font></pre>
  <input onclick="calleeDemo()" value="handleCallee" type="button">
  <input onclick="calleeLen()" value="calleeLen()" type="button">
  <input onclick="calleeLen(1,2,3)" value="calleeLen(1,2,3)" type="button">
  <input onclick="calleeLengthDemo()" value="handleCalleeLength()" type="button">
  <input onclick="calleeLengthDemo(1,2)" value="handleCalleeLength(1,2)" type="button">
  <h5>
从上面的例子可以看出，callee可以用来打在执行函数，也就是指向被调用的函数。上面的例子就说明calee可以打印其本身，当然还有其它的一些用
途。而length属性中arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时
形参长度是否和实参长度一致。</h5>
</div>
<a name="callandapply"></a>
<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);
}
<font color=red>
< input onclick="handleSPC('never-online')" value="handle simple call" type="button">
< input onclick="handleSPA('BlueDestiny')" value="handle simple apply" type="button">
</font></pre>
<input onclick="handleSPC('never-online')" value="handle simple call" type="button">
<input onclick="handleSPA('BlueDestiny')" value="handle simple apply" type="button">
<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() {
  alert("base:"+this.member);
}
}
function extend() {
base.call(this);
window.alert(member);
window.alert(this.member);
window.alert("extend:"+this.method);
this.method();
}
<font color=red>
< input onclick="extend()" value="inherited" type="button">
</font></pre>
<input onclick="extend()" value="inherited" type="button">
<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(this["adApplyDemo"]);
alert(adApplyDemo("world"));
alert(this["adApplyDemo"]("Gu Laicheng"));
}
function applyAfter() {
alert(this["adApplyDemo"]);
alert(this["adApplyDemo"]("Gu Laicheng"));
handleAdApplyDemo(this, "adApplyDemo", hellowordFunc);
alert(this["adApplyDemo"]);
alert(adApplyDemo("world")); // Hello world!
}
<font color=red>
< input onclick="applyBefore()" value="原始的adApplyDemo('world')" type="button">
< input onclick="applyAfter()" value="应用后的adApplyDemo('world')" type="button">
</font></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 onclick="applyBefore()" value="原始的adApplyDemo('world')" type="button">
<input onclick="applyAfter()" value="应用后的adApplyDemo('world')" type="button">
</div>
</div>
</div>
<div id=glc style="position:absolute;width:500;height:120;overflow:auto;display:none;background-color:#AAAAFF;border:1 solid red" onclick="this.style.display='none'">
ddddddddddd
</div>

</body>

</html>