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

function testCaller() {
  var caller = testCaller.caller;
  alert(caller);
}
function aCaller() {
  testCaller();
}
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));

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

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

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)

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

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!