Unexpected "arguments" property on object

Question

In the following, the second and third console outputs seem to contradict:

function test() {

    console.log(arguments); // -> ["my", "arguments"]

    console.dir(this); // -> test function with arguments property set to null

    console.log(this.arguments); // -> ["my", "arguments"]

}

test.call(test, 'my', 'arguments');

As per my comments, inspecting the arguments property on this shows null, whilst logging this.arguments explicitly shows ["my", "arguments"].

What exactly is this when you invoke a function in such a way? I didn't expect this.arguments to contain the invocation arguments!

Answer 1

MDN says

arguments as a property of Function can no longer be used.

Therefore I wouldn't attempt to use this.arguments at all, but use the local function variable arguments. It's quite apparent that there's some magic going on to create arguments as well.

Answer 2

What exactly is this when you invoke a function in such a way? I didn't expect this.arguments to contain the invocation arguments!

The this keyword indeed refers to the test function - that's what you called it with. You can assert that by logging this === test.

So what's that arguments property? A very deprecated one that is set to the actual arguments object during a function invocation (and removed thereafter, which seems to be the reason why console.dir didn't capture it correctly). Don't use it, and don't care about it :-)

function test() {
    console.assert(this === test);
    console.assert(this.arguments === arguments);
    console.log(Object.getOwnPropertyDescriptor(this, "arguments"));
}
test.call(test, 'my', 'arguments');

// result (in Opera):
Object {
    configurable: false,
    enumerable: false,
    value: Arguments {
        0: "my",
        1: "arguments",
        callee: Function {…},
        length: 2
    },
    writable: false
}