How is this possible without instantiating (new-'ing') it: var a = Array.prototype.slice.call(arguments)?

Question

In the context of inside a function, here's the code (based on the standard pattern of making a function's 'arguments' into an array):

var args = Array.prototype.slice.call(arguments);

I'm trying to study this out (am a beginner at JavaScript, coming from C#).

I understand that slice is an instance method due to it being a prototype function of Array.

I also understand that this is not a static 'utility function', meaning to use it, you have to new it up like so: (example) var myArray = new Array(); myArray.slice(...);

call passes an object in here to change the context to that of arguments

Related to this, I don't also know the difference between Array.prototype.slice.call([32,32,121,412]) and Array.prototype.slice([32,32,121,412]) not in the context of call.

So, here's my question:

I just don't get how this works in relation to instance vs static methods... so can anyone explain the intricacies of var args = Array.prototype.slice.call(arguments);?

Why can this be used without calling new?

Why was this possible? It's not a Static method, and it must be 'newed' up, and it only works when you use call function... (at least in my C# mentality...)

Answer 1

The difference between Array.prototype.slice.call([32, 32, 121, 412]) and Array.prototype.slice([32, 32, 121, 412]) is that in the first case, the actual Array [32, 32, 121, 412] becomes the "this" object for the call. In other words, it's just like this code: [32, 32, 121, 412].slice(). Just calling slice on the prototype executes it in the context of the prototype object, which probably wouldn't do anything useful.

Answer 2

When you add a function to an object's prototype, it becomes a function that you can use on instances of that object. The context of that function with be the instance. i.e.

Array.prototype.myFunction = function() {
     alert( this[0] ); // this should refer to the Array instance
};
var x = new Array(1);
x[0] = 5;
x.myFunction(); // alerts 5

However, sometimes you may have a structure like an array that are not a subclass or instance of Array (such as an Arguments object). What the call method of a function does is changes the context to whatever the first parameter to call is. In this case, the call method is being called on a function of the Array's prototype. In all reality, Array.prototype.myFunction is just a function defined in the above block of code. call is a method that can be called on any function to change its context. Therefore, instead of an Array instance as the context, you would have an arguments object.

function foo() {
    Array.prototype.myFunction.call( arguments ); // arguments is [6]
    // alerts 6
}
foo( 6 );

More info on call.

Answer 3

I think perhaps you're getting confused by the behaviour of "instance" and "static" methods in languages like Java that have classes. JavaScript doesn't work the same way.

Also you're confused about another issue, that being how all JS function calls work in terms of setting this within the called function (i.e., setting what object the function will likely attempt to operate on) and what effect .call() has on setting this.

The .slice() method is defined as a property of Array.prototype, not as a Java-style "instance method" on the individual array instances. You can call Array.prototype.slice() without needing an instance of an array created with new.

When you say:

myArray.slice()

JS will first see if .slice() actually is a method of the myArray object, and then (given that it isn't) it will see if it is a method of the Array prototype - which it is, so it runs that method.

When you call any JS function with "dot" notation, i.e., myArray.slice(), within that function the special variable this will be set to the object. this is a reference to the object that the function should operate on. But if you call a JS function using .call(), within that function this will be set to the object you pass as a parameter to .call(). So

myArray.slice()

says to call .slice() and have it operate on myArray.

var args = Array.prototype.slice.call(arguments);

Says to call .slice() and have it operate on arguments

P.S. don't use var myArray = new Array(); - better to say var myArray = [];

Answer 4

Unlike C#/Java, functions are actually first-class citizens in JavaScript.

In a general sense:

This means there is no need to "new" it up.. it works exactly as it is because it is its own object.

"new"ing up a function (in a general sense) merely changes the 'this' value of that function to the variable it will be assigned to, then returns it.

It is possible to use a function in JavaScript without "newing" it up because they are "first-class citizens" in JavaScript.

In a more in-depth sense, this is what "new" does:
- it creates a new object deriving from MyConstructor.prototype
- it assigns the 'this' value of the constructor function to the new object
- execute the code inside (adds properties to new object/instance)
- returns the new object

Some extra notes about what I learned from instances:
- they don't have a .prototype property like their constructor functions
- though they have a [[prototype]] property, derived from MyConstructor.prototype
- overriding a property in the instance shadows the MyConstructor.prototype[property]..