An in-depth analysis of the arguments object in JavaScript

arguments definition

All functions have their own arguments object, which is used to store the parameters it actually receives, and is not limited to the parameter list defined when the function is declared. It is not an array but is similar to an array. 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. But it does not have some methods of arrays. You can convert arguments into a real array through call, and then perform array operations.

var args = Array.prototype.slice.call(arguments);

Array class

1. Determine whether ARGUMENTS is an array

alert(arguments instanceof Array);
alert(arguments instanceof Object);

2. How to strictly determine whether a data is an instance of the array (ARRAY) class

function isArray(value){
  if (typeof Array.isArray === "function") {
    return Array.isArray(value);
  }else{
    return Object.prototype.toString.call(value) === "[object Array]";
  }
}

3. Convert ARGUMENTS into arrays
Method 1: Built-in types can find built-in attribute methods through prototype. Array.prototype.slice is the built-in method slice for accessing Array. Through the slice method, an array is returned. call is a method of calling an object to replace the current object with another object.

var arg = Array.prototype.slice.call(arguments,0);

Method 2: The performance is a little worse than method 1, because it creates an array first and then proceeds

var arg = [].slice.call(arguments,0);

Method 3: Convert it into an array through a loop

function toArray(arguments){
  var a = [];
  for(var i=0;i<arguments.length;i++){
    a.unshift(arguments.[i]);
  }
  return a;
}

caller

When a function is called by another function, the called function will automatically generate a caller attribute pointing to the function object that called it. If the function has not been called, caller is null.

function testCaller() {
  var caller = testCaller.caller;
  alert(caller);
}
function aCaller() {
  testCaller();
}
aCaller();

What pops up is the content of function aCaller.

arguments.callee
arguments.callee points to the running function itself and returns the Function object being executed, which is the body of the specified Function object.
Note: arguments.length is the actual parameter length, arguments.callee.length is the formal parameter length, which is usually used to determine whether the formal and formal parameter lengths are consistent.
Obtain the actual parameters of the function through arguments, and obtain them through arguments.callee The formal parameters of the function.
is also widely used in closures.

var i = 0;
 
  function b(num) {
 
    if (num < 10) {
 
      num++;
 
      i++;
 
      //如果有参数，callee也要把参数带上;
 
      arguments.callee(num);
 
    } else {
 
      //输出2次
 
      alert("调用了"+i+"次callee!");
 
    }
 
  }
 
  b(8);
 
 Arguments.callee在闭包中的应用，它提供了一种递归调调用的功能。
 
//用arguments.callee计算10的阶乘,例如: 1×2×3×4×5×6×7....
 
  function c(x) {
 
    return x > 1 ? x * arguments.callee(x - 1) : 1
 
  } (10);
 
  //输出6
 
  alert(c(3));
 
  //输出3628800
 
  alert(c(10));

Example: callee finds the sum of 1-n

function fn(n){
  if(n==1) return n;
  else return n+arguments.callee(n-1);
}

It allows an anonymous function to call itself

Example:

function list(type){
  var result = "<"+type+"l><li>";
  var args = Array.prototype.slice.call(arguments,1);
  result += args.join("</li><li>");
  result += "</li></"+type+"l>";
  return result;
}
var listHtml = list("o","one","two");
console.log(listHtml);

Example 2: Interview question: Which of the following console.log results is [1,2,3,4]?

function foo(x){
  console.log(arguments);
  return x;
}
foo(1,2,3,4);
function foo(x){
  console.log(arguments);
  return x;
}(1,2,3,4)

During pre-interpretation, function fn(){}(1); will be processed separately and divided into two functions, the first one is function fn() {}, and the second one is Anonymous function: (1). If the second one takes no parameters, an error will be reported, but the above function is correct if it is contained in a ().

(function fn(){
  console.log(arguments);
}(1,2,3,4));
(function foo(x){
  console.log( arguments);
  return x;
})(1,2,3,4)
function foo(){
  bar.apply(null,arguments);
}
function bar(x){
  console.log(arguments);
}
foo(1,2,3,4);

For more in-depth analysis of arguments objects in JavaScript and related articles, please pay attention to the PHP Chinese website!