Summary of usage of arguments, caller, callee, apply in js_javascript skills

Before mentioning the above concepts, I first want to talk about the implicit parameters of functions in JavaScript: arguments

Arguments

This object represents the function being executed and the parameters of the function that calls it.

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

Explanation
Arguments is a hidden object created in addition to the specified parameters when making a function call. Arguments is an object that is similar to an array but not an array. It is said to be similar to an array because it has the same access properties and methods as an array. The value of the corresponding single parameter can be accessed through arguments[n], and it has the array length attribute length. Also, the arguments object stores the parameters actually passed to the function, not limited to the parameter list defined by the function declaration, and the arguments object cannot be created explicitly. The arguments object is only available at the beginning of the function. The following example details these properties:

Copy code The code is as follows:

//arguments object usage.
function ArgTest(a, b){
var i, s = "The ArgTest function expected ";
var numargs = arguments.length; // Get the value of the passed parameter.
var expargs = ArgTest.length; // Get the value of the expected 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 ){ / / Get parameter content.
s = " Arg " i " = " arguments[i] "n";
}
return(s);
}

Added a code here to explain that arguments is not an array (Array class):

Copy code The code is as follows:

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

Run the code and you will find that the first alert displays 1, which means that the array object has a selfvalue attribute with a value of 1, and when you call the function testAguments , you will find that "undefined" is displayed, indicating that it is not a property of arguments, that is, arguments is not an array object.

caller

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

Explanation
For functions, the caller attribute is only defined when the function is executed. If the function is called from the top level, then caller contains null . If the caller attribute is used in a string context, the result is the same as functionName.toString, that is, the decompiled text of the function is displayed.

The following example illustrates the usage of the caller attribute:

Copy the code The code is as follows:

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

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

[function.]arguments.callee
Optional function parameter is the name of the Function object currently being executed.

Explanation
The initial value of the callee attribute is the Function object being executed.
The callee attribute is a member of the arguments object, which represents a reference to the function object itself. This is beneficial to the recursion of anonymous functions or to ensure the encapsulation of functions. For example, the following example recursively calculates the sum of natural numbers from 1 to n. This property is only available when the relevant function is executing. It should also be noted that callee has a length attribute, which is sometimes better for verification. arguments.length is the actual parameter length, and arguments.callee.length is the formal parameter length. From this, you can determine whether the formal parameter length is consistent with the actual parameter length when calling.

Example

Copy code The code is as follows:

//callee can print itself
function calleeDemo() {
alert(arguments.callee);
}
//Used to verify parameters
function calleeLengthDemo(arg1, arg2) {
if (arguments.length= =arguments.callee.length) {
        window.alert("Verify that the formal and actual parameter lengths are correct!");
        return; arguments.length);
alert("Formal parameter length: " arguments.callee.length);
}
}
//Recursive calculation
var sum = function(n){
if (n <= 0)
return 0;
else
return n ＋arguments.callee(n - 1)
}


More general recursion Function:

Copy code The code is as follows:

var sum = function(n){

if (n<=0)
return 0;
else
return n sum (n-1);
}


When calling: alert(sum( 100));

The function contains a reference to sum itself. The function name is just a variable name. Calling sum inside the function is equivalent to calling a global variable. It cannot well reflect that it is calling itself. This Using callee would be a better method.

apply and call

Their function is to bind a function to another object for execution. The only difference between the two is the way to define parameters:

apply(thisArg,argArray);

call(thisArg[,arg1,arg2…] ]);

That is, the this pointer inside all functions will be assigned thisArg, which can realize the purpose of running the function as a method of another object

Instructions for apply

If argArray is not a valid array or is not an arguments object, a TypeError will be caused.
If neither argArray nor thisArg is provided, the Global object will be used as thisArg, and no parameters can be passed.
Description of

call

call method can change the object context of a function from the initial context to the new object specified by thisArg.
If no thisArg parameter is provided, the Global object is used as thisArg

Related tips:

There is another trick in applying call and apply. After using call and apply to apply another function (class), the current function (class) will have the methods or attributes of the other function (class). This It can also be called "inheritance". Look at the following example:

Copy code The code is as follows:

// Demonstration of inheritance

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 can be seen from the above example, extend can inherit the methods and properties of base after calling.

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

The implementation code is as follows:

Copy code The code is as follows:

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

Analysis: From the code, The object contains only one method: Create, which returns a function, the class. But this is also the constructor of the class, which calls initialize, and this method is the initialization function defined when the class is created. In this way, the class creation mode in prototype can be realized

Example:

Copy code The code is as follows:

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();