The arguments in the js caller and callee apply the usage of the summary

  • 2020-03-30 01:33:56
  • OfStack

Before I mention the above concepts, I want to first mention the implicit argument to a function in javascript: arguments

The Arguments

This object represents the arguments to the function being executed and to the function calling it.

The arguments [function.] [n]
Parameter function: option. The name of the currently executing Function object. N: options. Parameter value index starting at 0 to be passed to the Function object.

instructions
Arguments is a hidden object that is created in addition to the specified Arguments when a function is called. Arguments is an object that is like an array but not an array. It is said to be like an array because it has the same access property and way as an array. Arguments [n] can access the value of the corresponding single parameter and has the array length property length. Also, the arguments object stores the actual arguments passed to the function, not limited to the list of arguments defined by the function declaration, and you cannot explicitly create arguments objects. The arguments object is only available when the function starts. The following example details these properties:


//The use of arguments object.
function ArgTest(a, b){
   var i, s = "The ArgTest function expected ";
   var numargs = arguments.length;     //Gets the value of the passed parameter.
   var expargs = ArgTest.length;       //Gets the value of the desired parameter.
   if (expargs < 2)
      s += expargs + " argument. ";
   else
      s += expargs + " arguments. ";
   if (numargs < 2)
      s += numargs + " was passed.";
   else
      s += numargs + " were passed.";
   s += "nn"
   for (i =0 ; i < numargs; i++){      //Gets the parameter content.
   s += " Arg " + i + " = " + arguments[i] + "n";
   }
   return(s);                          //Returns a list of parameters.
}

Add a code that says arguments are not an Array class:

Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);
function testAguments(){
    alert(arguments.selfvalue);
}

When you run the code, you'll see that the first alert displays 1, which means that the array object has the selfvalue property of 1, and when you call the function testAguments, you'll see that it displays "undefined," which means that arguments are not an array object.

caller

Returns a reference to a function that calls the current function.
FunctionName. The caller
The functionName object is the name of the function being executed.

instructions
For functions, the caller property is defined only when the function executes. If the function is called from the top level, the caller contains null. If the caller property is used in the string context, the result is the same as functionname.tostring, that is, the decompressed text of the function is displayed.

The following example illustrates the use of the caller property:


// caller demo {
function callerDemo() {
    if (callerDemo.caller) {
        var a= callerDemo.caller.toString();
        alert(a);
    } else {
        alert("this is a top function");
    }
}
function handleCaller() {
    callerDemo();
}

The callee

Returns the body of the Function object being executed, that is, the specified Function object.

[function.] the arguments. The callee
The optional function parameter is the name of the currently executing function object.

instructions
The initial value of the callee property is the Function object being executed.
The callee property is a member of the arguments object and represents a reference to the function object itself, which is good for recursion of anonymous functions or for encapsulation of functions, such as the recursion in the following example to calculate the sum of natural Numbers from 1 to n. This property is only available when the relevant function is executing. It's also important to note that callee has a length property, which is sometimes good for validation. Arguments. Length is the argument length, and arguments. Callee. Length is the argument length, so you can tell if the argument length is the same as the argument length when called.

The sample


//Callee can print itself
function calleeDemo() {
    alert(arguments.callee);
}
//Used to validate parameters
function calleeLengthDemo(arg1, arg2) {
    if (arguments.length==arguments.callee.length) {
        window.alert(" Verify the shape parameter and argument length is correct! ");
        return;
    } else {
        alert(" Argument length: " +arguments.length);
        alert(" Shape parameter length:  " +arguments.callee.length);
    }
}
//The recursive calculation
var sum = function(n){
if (n <= 0)                        
return 0;
else
    return n  + arguments.callee(n - 1)
}

More general recursive functions:

var sum = function(n){
    if (n<=0) 
  return 0;
 else 
  return n + sum (n-1);
}

Alert (sum(100));
The function name is just a variable name. Calling sum inside the function is equivalent to calling a global variable, which does not well reflect calling itself. In this case, callee is a better method.

The apply and call

Both of them bind the function to another object to run. They only differ in the way parameters are defined:

Apply (thisArg argArray);
Call (thisArg [, arg1, arg2...]. ]);

This pointer inside all functions is assigned to thisArg, which enables the function to be run as a method of another object

The apply of the instructions
This causes a TypeError if argArray is not a valid array or is not an arguments object.
If neither argArray nor thisArg is provided, then the Global object will be used as thisArg,
And cannot be passed any parameters.

The call instruction
The call method changes the object context of a function from its original context to a new object specified by thisArg.
If no thisArg parameter is provided, then the Global object is used as thisArg

Related tips:

Another trick to applying call and apply is that after another function (class) is applied with call and apply, the current function (class) has the methods or properties of another function (class), which can also be called "inheritance". See the following example:


//Inherited demonstration
function base() {
    this.member = " dnnsun_Member";
    this.method = function() {
        window.alert(this.member);
    }
}
function extend() {
    base.call(this);
    window.alert(member);
    window.alert(this.method);
}

As you can see from the above example, extend inherits the methods and properties of base after a call.

By the way, apply is used in the javascript framework prototype to create a pattern that defines a class,

Its implementation code is as follows:


var Class = {
create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
}
}

Resolution: from the code, this object contains only one method: Create, which returns a function, or class. But this is also the constructor of the class, where initialize is called, and this method is the initialization function defined when the class is created. In this way, you can implement the class creation pattern in prototype

Example:


var vehicle=Class.create();
vehicle.prototype={
    initialize:function(type){
        this.type=type;
    }
    showSelf:function(){
        alert("this vehicle is "+ this.type);
    }
}
var moto=new vehicle("Moto");
moto.showSelf();


Related articles: