Home >Web Front-end >JS Tutorial >Javascript - Comprehensive understanding of caller, callee, call, apply_basic knowledge

Javascript - Comprehensive understanding of caller, callee, call, apply_basic knowledge

WBOYOriginal: 2016-05-16 19:21:40836browse

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

<h1>

</h1> Javascript - Comprehensive understanding of caller, callee, call, apply <h6>
</h6> Author: BlueDestiny, never-online From: http://www.never-online.net, Blog.csdn.net/BlueDestiny <div align="center">

<div class="block">
<h3>
  </h3> 1. caller <h5>
  <h5> The JScript reference explains: Returns a reference to a function that calls the current function. 
How to understand this sentence, let’s give a simple example first: <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>
    </h5>As you can see from the above example, it returns a reference to the calling data. (Pointing to the function called by the request) It can also be seen from this that when onclick triggers an event, it always carries an anonymous function </h5>
</h5>
</div>
</div>
<div align="center">

<div class="block">
    <h3>
        </h3> 2. callee <h5>
        </h5> The description in the JScript reference is: Return the Function object being executed, which is the body of the specified Function object. 
        It should be noted that callee has a length attribute, which is sometimes better for verification. <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>
        </h5> As can be seen from the above example, callee can be used to hit the execution function, that is, to point to the called function. The above example shows that calee can print itself, and of course there are other uses. In the length attribute, arguments.length is the actual parameter length, and arguments.callee.length is the formal parameter length. From this, we can determine whether the formal parameter length is consistent with the actual parameter length during the call. </div>
    <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>

<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">http://www.never-online.net</a>  
  </h4> 
</div>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript miscellanea -display data real time, using window.status_Typical special effectsNext article：Javascript miscellanea -display data real time, using window.status_Typical special effects

See more

Javascript - Comprehensive understanding of caller, callee, call, apply_basic knowledge

Related articles