How does the JavaScript .apply method work?

Question

I'm not asking how to use it. I know how to use it.

But when apply invokes the function that called it, how exactly does it pass an array of arguments into a function that was not written to take an array for an argument? Does it combine its given arguments array with the called functions "arguments"?

I looked at the latest ECMAscript specifications for .apply and .call, but I didn't really see anything about underlying logic.

Any explanation would be welcome. I'm new to JavaScript, and want to better understand what's going on under the hood. I'm currently trying to recreate some of the basic functions on my own, and this one is giving me a lot of trouble.

Answer 1

From the spec.

We have to take the argArray and create what will be the arguments object pseudo array.

Essentially

Function.prototype.apply = function apply (thisArg, argArray) {
    var len = argArray.length;
    var n = ToUint32(len);
    var argList = []; // where this is a List not an array.
    var index = 0;
    var indexName;
    var nextArg;
    while (index < len) {
        indexName = ToString(index);
        nextArg = argArray[indexName];
        argList.push(nextArg);
        index++;
    }
    return this['[[Call]]'](func, thisArg, argList); // ignore the syntax however
                                                     // This is the line where the function
                                                     // will be called and provide 
                                                     // the thisArg and thisArray
}

I omitted some of the type checking that happens but this is essentially pretty close to what the spec dictates as how Function.prototype.apply is implemented. We craft our own object and build up the argList prior to calling the function.

Its important to note. that the internal method named [[Call]] is different than Function.prototype.call.

Answer 2

how exactly does it pass an array of arguments into a function that was not written to take an array for an argument

You are misunderstanding how this works. apply does not pass an array of arguments to the object. It takes an array and then uses that to dynamically build a function call, similarly to what you could do with an eval statement (but it does it natively).

For example, an eval statement could work like this:

function buildFromArray(funcName, arrayOfArgs)
{
    var functionCall = funcName + "(";

    for ( var i = 0; i < arrayOfArgs.length; i++ )
    {
        //Very simplified, only allows for string args
        functionCall += "\"" + arrayOfArgs + "\"";

        if ( i < arrayOfArgs.length - 1 ) functionCall += ",";
    }

    functionCall += ")";

    //Now we run the compiled call which will be something like:
    //myFunction("one","two")
    eval( functionCall );
}

buildFromArray( "myFunction", [ "one", "two" ] );

This is very simplified, but you can see how an array is never passed to the function myFunction.