Explaining some of John Resig's ninja code

Question

Function.prototype.bind = function(){
     var fn = this, args = Array.prototype.slice.call(arguments),
      object = args.shift();
      return function(){
              return fn.apply(object,
                   args.concat(Array.prototype.slice.call(arguments)));
      };
};


var myObject = {};
function myFunction(){
    return this == myObject;
}
assert( !myFunction(), "Context is not set yet" );
var aFunction = myFunction.bind(myObject)
assert( aFunction(), "Context is set properly" );

Tiny modification to Jeffery's code below helped me understand the arguments used in the inner anonymous function. I just changed the 3 lines below

var introduce = function(greeting) { alert(greeting + ", my name is " + this.name + " ,home no is " + arguments[1]); }

hiBob(" 456"); // alerts "Hi, my name is Bob"
yoJoe(" 876");

Thanks everyone

Answer 1

To answer your question, this is what slice does

Array.slice(begin[,end]) The slice method creates a new array from a selected section of an array. The original array is unaffected by this but, if a string or number in one array is altered, it is not reflected in the other, whereas a change to a referenced object can be seen in both Array objects. The slice method uses the zero-based array index to determine the section out of which to create the new array. It extracts up to, but not including, the 'end' element (if no 'end' is specified, the default is the very last element). The following code creates an array called 'trees' and then displays a 'slice' of it: Code:

trees = ["oak", "ash", "beech", "maple", "sycamore"] 
document.write(trees.slice(1,4))

Output: ash,beech,maple If you use a negative index for the 'end', this specifies an element so many places from the end. Continuing with the above example, the following code would display the second through the third to last elements of the array:
Code:

trees = ["oak", "ash", "beech", "maple", "sycamore"] 
document.write(trees.slice(1,-2))

Output: ash,beech

As to what slice does given the current context, CMS has the right answer

Answer 2

Array.prototype.slice.call(arguments) creates an Array containing all the arguments passed to the function.

Answer 3

It turns the arguments object into an Array object so that he can call args.shift().

The arguments object is an array-like object that has 0 or more numeric index properties and a length property

Answer 4

The arguments object is an array-like object, it has only the length property.

Calling the slice function through the Array.prototype is a common technique to convert it to an array, so you will be able to use array functions like shift and concat on this example, directly.

Answer 5

This code creates a new method on the Function type named bind that accepts a free function as input and returns a wrapper function that calls it as if it were a method on the specified object. This is quite similar to how a .Net delegate wraps together a function and its associated this reference.

Additionally, if more than one argument is supplied to bind, these additional arguments are prepended to the call -- this technique is also called currying.

To try to explain it in a simpler fashion, consider something like this:

var bob = { name: "Bob" };
var joe = { name: "Joe" };

var introduce = function(greeting) { alert(greeting + ", my name is " + this.name); }

var hiBob = introduce.bind(bob, "Hi");
var yoJoe = introduce.bind(joe, "Yo");

hiBob(); // alerts "Hi, my name is Bob"