Home > Developer > 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> <! -- 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 ("verify that the parameter and real parameter length are correct! "); Return;} else {alert (" real parameter length: "+ arguments. length); alert ("parameter length:" + 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 oldFun C. 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> Javascript-fully understand caller, callee, call, apply Author: BlueDestiny, never-online From: http://www.never-online.net , Blog.csdn.net/BlueDestiny <p align = "center"> <p class = "block"> 1. The caller JScript reference indicates that a reference to the function is returned, this function calls the current function. For more information, see <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 "/> the preceding example shows that it returns a call Use data references. (Pointing to the function called by the request) It can also be seen that in this case, the onclick trigger event always carries an anonymous function </p> <p align = "center"> <p class = "block"> 2. callee JScript reference description: returns the Function object being executed, that is, the body of the specified Function object. It should be noted that callee has the length attribute, which is usually used for verification. <Pre class = "code"> function calleeDemo () {alert (arguments. callee);} function calleeLengthDemo (arg1, arg2) {if (arguments. length = arguments. callee. length) {window. alert ("verify that the parameter and real parameter length are correct! "); Return;} else {alert (" real parameter length: "+ arguments. length); alert ("parameter length:" + arguments. callee. length) ;}</pre> <input type = "button" onclick = "calleeDemo () "value =" handleCallee "/> <input type =" button "onclick =" calleeLengthDemo () "value =" handleCalleeLength "/> as shown in the preceding example, callee can be used to call a 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 length of the real parameter, and arguments. callee. length is the length of the form parameter. Therefore, you can determine whether the length of the form parameter is consistent with the actual length. </P> <p align = "center"> <p class = "block"> 3. Description in JScript reference of call and apply call Methods: call a method of an object, replace the current object with another object. Call ([thisObj [, arg1 [, arg2 [,[,. argN]), but there is no example of the apply method. For details in JScript reference: apply a method of an object and replace the current object with another object. Apply ([thisObj [, argArray]) actually serves almost the same purpose. Note that call (thisObj [, arg1 [, arg2 [,) the arg parameter in can be a variable, while the parameter in apply ([thisObj [, argArray]) is an array set. Next let's take a look at the specific application of call and apply <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 c All "/> <input type =" button "onclick =" handleSPA ('bluedestiny') "value =" handle simple apply "/> as shown in the preceding simple example, call and apply can pass the current parameter to another function parameter to call another function application. Sometimes this is a very practical method. Of course, call or apply (a parameter or an array) depends on the actual situation. Next let's take a look at another application call and apply. There is another technique in it. After using call and apply to apply another function (class), the current function (class) has another function (class) method or attribute, which can also be called "inheritance ". See the following example. <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"/> the preceding example shows that after calling, extend can inherit the methods and attributes of the base. Look at the apply application <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> note that you must click the "original adApplyDemo ('World')" button first. If you click "adApplyDemo ('World') after the application, the apply method is applied first, so that the original value will be changed. Some friends may not find anything special. I will point it out here. When you click the button on the left, only "this is never-online, BlueDestiny 'World' demo ", after you click the button on the right, the result will be "this is never-online, BlueDestiny 'Hello world' demo". click the button on the left to see what the result will be? Try it by yourself: D. The adApplyDemo function has been rewritten. This example illustrates the "real" effect of call and apply. <Input type = "button" onclick = "applyBefore ()" value = "original adApplyDemo ('World ') "/> <input type =" button "onclick = 'applyafter () 'value =" adApplyDemo ('World') after the application ') "/> </p> Power By BlueDestiny, never-online, http://www.never-online.net </P> </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
