JavaScript advanced series—arguments object

• Convert to array

• Pass parameters

• Automatic update

• Performance Truth

#Every function in JavaScript can access a special variable arguments. This variable maintains the list of all parameters passed to this function.

arguments variable is not an array (Array). Although syntactically it has the array-related property length, it does not inherit from Array.prototype and is actually an Object.

(Note: Since arguments have been defined as a variable within the function. Therefore, defining arguments through the var keyword or declaring arguments as a formal parameter will result in native arguments not being created.)

Therefore, standard array methods such as push, pop or slice cannot be used on the arguments variable. Although it is possible to use a for loop to traverse, in order to better use the array method, it is best to convert it into a real array.

Convert to array

The following code will create a new array containing all elements in the arguments object.

Array.prototype.slice.call(arguments);

This conversion is relatively slow and is not recommended in code with poor performance.

Passing parameters

The following are recommended practices for passing parameters from one function to another.

function foo() {
    bar.apply(null, arguments);
}
function bar(a, b, c) {
    // 干活
}

Another trick is to use call and apply together, creating a quick unbinding wrapper.

function Foo() {}

Foo.prototype.method = function(a, b, c) {
    console.log(this, a, b, c);
};

// 创建一个解绑定的 "method"
// 输入参数为: this, arg1, arg2...argN
Foo.method = function() {

    // 结果: Foo.prototype.method.call(this, arg1, arg2... argN)
    Function.call.apply(Foo.prototype.method, arguments);
};

Translator's Note: The above Foo.method function has the same effect as the following code:

Foo.method = function() {
    var args = Array.prototype.slice.call(arguments);
    Foo.prototype.method.apply(args[0], args.slice(1));
}

Automatically updates the

arguments object to its internal properties and function form Parameters create getter and setter methods.

Therefore, changing the value of the formal parameter will affect the value of the arguments object, and vice versa.

function foo(a, b, c) {
    arguments[0] = 2;
    a; // 2                                                           

    b = 4;
    arguments[1]; // 4

    var d = c;
    d = 9;
    c; // 3
}
foo(1, 2, 3)

Performance Truth

The arguments object is always created regardless of whether it is used, except in two special cases - declared as a local variable and as a formal parameter.

arguments getters and setters methods are always created; therefore using arguments has no impact on performance. Unless you need to access the properties of the arguments object multiple times.

Translator's Note: The description of arguments in strict mode in MDC is helpful for our understanding. Please look at the following code:

// 阐述在 ES5 的严格模式下 `arguments` 的特性
function f(a) {
  "use strict";
  a = 42;
  return [a, arguments[0]];
}
var pair = f(17);
console.assert(pair[0] === 42);
console.assert(pair[1] === 17);

However, there is indeed a situation that will have a significant impact. Performance of modern JavaScript engines. This is using arguments.callee.

function foo() {
    arguments.callee; // do something with this function object
    arguments.callee.caller; // and the calling function object
}

function bigLoop() {
    for(var i = 0; i < 100000; i++) {
        foo(); // Would normally be inlined...
    }
}

In the above code, foo is no longer a simple inline function inlining (Translator's Note: This refers to the parser that can do inlining processing), because it needs to know itself and its calls By. Not only does this negate the performance gain of inline functions, but it breaks encapsulation, so now functions may depend on a specific context.

# Therefore, it is strongly recommended that you do not use arguments.callee and its properties.

The above is the content of the JavaScript advanced series—arguments object. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!