JavaScript Binding

Question

thank you if you can help. Source of code http://ejohn.org/apps/learn/#84

1) in line 3 of the program below, where it says return context[name] what does this mean? Im guessing that it means name is bound to the context as a result of the apply function? Is that correct?

2)If my guess in 1 is correct, why does it use the [] brackets? Is that just the syntax. When I look at it, it makes me think array or object?

3) When it says apply(context, arguments) is arguments not the same as name or is arguments both context and name together? to put it another way, in the language of the call bind(Button, "click") is arguments only "click" or is it both button and click?

4) I tried to rewrite line 3 by substituting name for arguments like this

return context[name].apply(context, name);

but it didn`t work anymore, which raises the questions

a)if it is returning name bound to context (i.e. context[name]), why isn`t it sufficient to just have apply(context,name)?

b) if arguments includes both name and context, is the third line of the function essentially

return context[name].apply(context, [context, name]);

c) if my assumption in 4(b) is correct, why would we effectively have to have context passed twice in order to bind name to context? which is to say, I dont understand why line 3 doesnt work if you just write apply(context, name) instead of apply(context,arguments)

function bind(context, name){ 
  return function(){ 
    return context[name].apply(context, arguments); 
  }; 
} 

var Button = { 
  click: function(){ 
    this.clicked = true; 
  } 
}; 

var elem = document.createElement("li"); 
elem.innerHTML = "Click me!"; 
elem.onclick = bind(Button, "click"); 
document.getElementById("results").appendChild(elem); 

elem.onclick(); 
assert( Button.clicked, "The clicked property was correctly set on the object" );

Click me!

@mjmitche, please consult a text in JavaScript. What you've asked is very elementary JavaScript. — Stephen Chung
– Stephen Chung, Commented Mar 25, 2011 at 6:58
Could you link us to a fiddle, its rather confusing for me to actually understand without having a look at a working problem! Thanks — Shouvik
– Shouvik, Commented Mar 25, 2011 at 6:58
@Stephen Chung, I have consulted a few texts, but havent seen this explained exactly. This is from John Resigs Learning Advanced JavaScript, so I doubt its very beginner stuff. But anyways, if you dont want to answer the question, then you obviously dont have to, but I dont see what gives you the right to basically come and tell me to go away. This is after all a forum to ask questions. Telling someone to go read a text is not really a good answer. — mjmitche
– mjmitche, Commented Mar 25, 2011 at 7:02
@Shouvik. I attached a link to the source at the top of the question. It runs the program. — mjmitche
– mjmitche, Commented Mar 25, 2011 at 7:05

Anurag · Accepted Answer · 2011-03-25 07:58:31Z

It may be helpful to understand the basics of JavaScript objects before diving into the specifics. Any JavaScript property can be accessed with the bracket notation, or the dot notation (if it is a valid identifier). It can be confusing since arrays also use this notation. Say there is an object of cars and their makes,

var cars = { Ford: 2007, Honda: 2010, BMW: 2011 };

Then we can access their keys using the dot notation or the bracket notation

cars.Ford     // 2007
cars["Honda"] // 2010

Next, remember that functions are first class citizens in JavaScript. So you could use them as ordinary variables including storing them as object property values, in arrays, etc. Let's replace the years in the previous cars example with actual functions,

var cars = {
    Ford: function() { alert("2007"); },
    Honda: function() { alert("2010"); },
    BMW: function() { alert("2011"); }
};

The keys Ford, Honda, and BMW can still be accessed as in the previous example with the dot or bracket notation, with the only difference that this time a function will be returned instead of the integer year.

cars["BMW"] now returns a function which can be directly invoked as

cars["BMW"](); // or
cars.BMW();    // or

var name = "BMW"; 
cars[name]();

That's not all. There are still two more ways to execute a function - through apply and call. The difference between apply and call is subtle but you should read up more about them.

Finally, arguments represents an array-like object that contains the arguments passed in to a function. This is best demonstrated by an example,

function whatever() {
    console.log(arguments);
}

whatever(1, 2);                        // [1, 2]
whatever("foo", "bar", 23, [4, 6, 8]); // ["foo", "bar", 23, [4, 6, 8]]
whatever();                            // undefined

Without giving any names to the function parameters, we were able to log all the arguments passed to the function. Since it is an array like object, access each argument individually as arguments[0], arguments[1], etc.

And now to answer your questions,

1) in line 3 of the program below, where it says return context[name] what does this mean? Im guessing that it means name is bound to the context as a result of the apply function? Is that correct?

context[name] is similar to the cars['Ford'] example above. It is supposed to give a function which is then invoked by calling apply on it. When that function is called, inside the function this will refer to the object - context.

2) If my guess in 1 is correct, why does it use the [] brackets? Is that just the syntax. When I look at it, it makes me think array or object?

Hopefully this was answered above.

3) When it says apply(context, arguments) is arguments not the same as name or is arguments both context and name together? to put it another way, in the language of the call bind(Button, "click") is arguments only "click" or is it both button and click?

arguments has nothing to do with either context or name. It is simply a list of the arguments/parameters that the function was called with. Hopefully the above description cleared this as well.

4) I tried to rewrite line 3 by substituting name for arguments like this

return context[name].apply(context, name);

but it didn`t work anymore

It didn't work because apply expects the second argument to be an Array, and you passed it a String. Try return context[name].apply(context, [name]); instead.

which raises the questions

a) if it is returning name bound to context (i.e. context[name]), why isn`t it sufficient to just have apply(context,name)?

b) if arguments includes both name and context, is the third line of the function essentially

return context[name].apply(context, [context, name]);

arguments has nothing to do with the context, or name. Hopefully this was cleared up in the above examples.

c) if my assumption in 4(b) is correct, why would we effectively have to have context passed twice in order to bind name to context? which is to say, I dont understand why line 3 doesnt work if you just write apply(context, name) instead of apply(context,arguments)

The above answers already answer this part.

when you say, "arguments has nothing to do with either context or name. It is simply a list of the arguments/parameters that the function was called with." O.k, but bind(context,name) gets passed bind(button, "click"), and these two arguments are part of the list of arguments, as you say. so isn't apply(context, arguments) really like apply(button, [button, bind]) when the function is called?
not really. notice that the bind function returns a function itself. In your example, arguments is only being used in the inner function. Button and "click" are arguments of the outer function, not the inner function. If you call the function returned by bind with some values, then arguments in line 3 will refer to those values. For example, bind(Button, "click")("arg1", "arg2", arg3"). Now arguments will contain ["arg1", "arg2", "arg3"].

Mark Bessey · Accepted Answer · 2011-03-25 17:10:24Z

1

1) context[name] just means the property of the "context" object with that name. In the case of:

bind(Button, "click");

that works out to Button["click"], which is the click() function inside the Button object

2) All objects in Javascript are a collection of properties, which can be accessed by their names. Given the definition:

var Button = { 
  click: function(){ 
    this.clicked = true; 
  } 
};

both Button.click and Button["click"] would refer to the same thing - the function click() inside the Button object.

3) The arguments keyword refers to an array-like object containing all of the arguments passed to a function. In the example, bind() is returning a newly-created function. The "arguments" referred to in that function are whatever arguments that function gets called with. In this case, it's neither context nor name, it's whatever the onclick mechanism passes to the event handler.

Here's a slightly different way to write the code that sets up the event handler:

var elem = document.createElement("li"); 
elem.innerHTML = "Click me!"; 
var boundFunction=bind(Button, "click");
elem.onclick=boundFunction;
document.getElementById("results").appendChild(elem);

Maybe this makes it more clear that when you call bind(), it returns a new function. If you were to call the boundFunction like this:

boundFunction("these", "are", "arguments")

The use of arguments is inside the returned function, so arguments would be ["these", "are", "arguments"] in this case. The arguments that were passed to "bind" are used to construct the function that bind returns, so they're no longer relevant when the bound function gets called.

4) Until you understand the basics of how returning a function from another function works, this'll be pretty confusing. The purpose of apply() is to set the "this" keyword for a particular function invocation. Given the definition of Button, you might expect to be able to do this to set up the event handler:

elem.onclick = Button.click;

This doesn't work correctly, because when the event handling code calls the Button.click function, "this" is set to the global context, rather than to the Button instance. The purpose of the bind() function is to make a function that sets "this" appropriately, then calls the function you originally passed to bind().

I have a half-completed blog entry on this which might be a simpler example: http://codemines.blogspot.com/2010/01/javascript-by-example-functions-and.html

edited Mar 25, 2011 at 17:10

answered Mar 25, 2011 at 7:41

Mark Bessey

19.8k4 gold badges50 silver badges69 bronze badges

2 Comments

mjmitche Over a year ago

thank you so much. regarding your third answer, when you say, "it's whatever the onclick mechanism passes to the event handler," isn't the onclick event handler [ elem.onclick = bind(Button, "click"); ] passing Button and "click" to the bind function as parameters context, name, and those parameters are therefore contained in "arguments," which means apply(context, arguments) is really like apply(button, [button, "click"], no?

Mark Bessey Over a year ago

No, it really isn't like that at all. I'll edit my answer and see if I can make this clearer.

Collectives™ on Stack Overflow

JavaScript Binding

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related