In-depth analysis of the arguments object in JavaScript (graphic tutorial)

arguments is a built-in object in JavaScript, which stores the transfer of parameters like an array structure. Here we will analyze the arguments object in JavaScript in depth. Friends who need it can refer to the

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

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 an array
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 into array through 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, the 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: The following console.log result 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() {}, while the second one is an 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);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Simple and easy to understand, javascript self-study study notes

How to use Javascript Automatically convert the entered number into currency format (code attached)

About the scope scope chain of Javascript (graphic tutorial, clear at a glance )

The above is the detailed content of In-depth analysis of the arguments object in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!