Detailed explanation of arguments function in JavaScript (with examples)

Overview

Functions in JavaScript differ from other object-oriented languages ​​in several ways.

1. There is no function overloading

2. There is an array-like object arguments

   ## that represents the actual parameter list

#1. Function overloading

Simply put, JAVA allows several functions in the same class to have the same function name, but different parameter declarations. This is function overloading.

But JS does not support function overloading:

function foo(num) {
    console.log(num + 100)
}
function foo(num) {
    console.log(num + 200)
}

foo(100);  // 300

If two functions with the same name are defined in js, then the name only belongs to the function defined later.

2. Arguments class array

The function arguments object is a local variable available in all (non-arrow) functions, and is an array-like object. You can reference a function's (actual) parameters within a function using the arguments object.

function foo() {
    console.log(arguments);
}

foo(1, "foo", false, {name: "bar"}); // [1, "foo", false, object]

function foo() {
    console.log(typeof arguments);
}

foo(1, "foo", false, {name: "bar"}); // object

So, arguments is an array-style object with a length property, and subscripts to index elements.

3. Attributes of arguments

length

function foo(num1, num2, num3) {
    console.log(arguments)
}

foo(1);  // [1]

length attribute indicates passing Enter the actual number of parameters of the function, not the number of formal parameters when the function was declared.

callee callee represents the function itself, we can call itself through callee in the function.

4. Convert to a true array

1. slice

##arguments object does not support other methods of arrays, but you can use Function .call to call indirectly.

function sayHi() {
    console.log(Array.prototype.slice.call(arguments, 0))
}
sayHi("hello", "你好", "bonjour")  //["hello", "你好", "bonjour"]

splice

1. function sayHi() {
       console.log(Array.prototype.splice.call(arguments, 0));
   }
   sayHi("hello", "你好", "bonjour")  //["hello", "你好", "bonjour"]

Array.from

1. function sayHi() {
       console.log(Array.from(arguments));
   }
   sayHi("hello", "你好", "bonjour")  //["hello", "你好", "bonjour"]

Extension operator

1. function sayHi(...arguments) {
       console.log(arguments);
   }
   sayHi("hello", "你好", "bonjour")  //["hello", "你好", "bonjour"]

5. Strict mode

In strict mode and non-strict mode, the performance of arguments is different.

// 严格模式
function foo(a, b) {
    "use strict";
    console.log(a, arguments[0]);
    a = 10;
    console.log(a, arguments[0]);
    arguments[0] = 20;
    console.log(a, arguments[0]);
    b = 30;
    console.log(b, arguments[1])
}
foo(1);
输出：
1 1
10 1
10 20
30 undefined

// 非严格模式
function foo(a, b) {
    console.log(a, arguments[0]);
    a = 10;
    console.log(a, arguments[0]);
    arguments[0] = 20;
    console.log(a, arguments[0]);
    b = 30;
    console.log(b, arguments[1]);
}
foo(1);
输出：
1 1
10 10
20 20
30 undefined

In non-strict mode, the values ​​of passed parameters, actual parameters and arguments will be shared. When nothing is passed in, the actual and arguments values ​​will not be shared.

In strict mode, the values ​​of actual parameters and arguments are not shared.

The above is the detailed content of Detailed explanation of arguments function in JavaScript (with examples). For more information, please follow other related articles on the PHP Chinese website!