The Onclick example

The best known example, or is it complaint, about JavaScript's late binding is the mistake many beginners make when assigning an event handler that is also a method.

For example:

var myObject = {mySize: 99}; myObject.getSize=function() {
  alert(this.mySize);
 };
Button1.onclick=myObject.getSize;



Notice that assigning the Function object to a property of Button1 makes it a method of Button1 as well as of myObject - this is an example of one Function object serving two masters in that it is a method of myObject and Button1.

When you click the Button the Function is evaluated with this referencing the HTMLElement that is the Button. That is in this case the Function object is bound to the Button object.

The result is that the getSize function doesn't work and the beginner wastes a lot of time trying to debug the code. This is also how JavaScript gets a bad name.

Of course the correct way to do the job is to early bind the method.

myObject.getSize=function() {
  alert(this.mySize);
 }.bind(myObject);

With the addition of just bind(myObject) the event handler now works as the novice expects and displays the value of myObject.mySize.

It sometimes matters if methods are late or early bound - it all depends how you plan to use them.

Adding & Removing Object Methods

 If you have an object then it is easy enough to add a new method.

myObject.myNewMethod=function(){....};

the myNewthod function simply has to make use of this within its body as if it was being define as an object literal.

[Rest In Book]

Overriding Object Methods

Another important use of the bind method is that it can be used to override methods in object instances. If an object already has a method called myMethod then simply redefining it overrides it. That is:

myObject.myMethod=function(){....};

overrides the existing myMethod and substitutes  the new function. 

This works but often you want to make use of the old definition of myMethod to implement the new version.

How can you do this?

A simple minded approach would try to use something like:

var oldMyMethod=myObject.myMethod;

However this doesn't work because when you try to call the old method this is set incorrectly. That is

oldMyMethod();

calls the old version of MyMethod with this set to the global scope, usually window. 

The trick is to use bind to retain the correct call context:

oldMyMethod=myObject.myMethod.bind(myObject);

Now a call to oldMyMethod() really does call the method with this set to myObject.

You can use this technique to override methods with code that calls the old method to get the job done. 

[Rest In Book]

Is the JavaScript way better?

JavaScript is certainly different and trying to make it look like the way other languages do the job is a big part of the problem.

The need to use a call context, i.e. this, is a consequence of treating functions as first class objects and this is very well worthwhile. 

JavaScript takes an approach that has a synergy in that all of the parts fit together and, yes, give you more than the sum of the parts. As long as you understand all of the parts. 

Summary

• Functions are just objects and can be properties of other objects.
  
  
• A method is a function property that makes use of the object it is a property of in its code. 
  
  
• To allow a method to reference the object it is a property of it is passed an execution context in this - which is a reference to the object involved in the function call. 
  If a function is called using 
  myObject.function()
then this references myObject. We say that the function or method is bound to myObject.
  
  
• Functions that are methods use
this.myProperty
to reference properties of the object they are bound to.
  
  
• A Function object exists independently of any object that it is a property or method of. This means it can be referenced by other variables and the object it is bound to depends on how the function is called. A single Function object can be a method for many different objects and it can be just a Function object.
  
  
• You can use apply and call to explicitly set the value of this and so borrow methods from other object and create ad-hoc methods that aren't properties of the object that they work with.
  
  
• That is in JavaScript methods are late bound to their objects.
  
  
• The bind method can be used to create a Function object bound to any specified object. That is myFunc.bind(myObject) creates a new Function object permanently bound to myObject with the same function body as myFunc.
  
  
• You can late bind a method to an object using:
  myObject.property=function(parameters){
  function body
 };
• You can early bind a method to an object using:myObject.property=function(parameters){
  function body
 }.bind(myObject);


• In general you should use the default late bound method unless you need to assign or pass a method rather than a function when you should early bind.

Just JavaScript 

 There is a newer version of the draft of the book here.

A Radical Look At JavaScript

Contents

1. JavaScript Isn't Java, or C, or C# ... (Book Only)
2. In The Beginning Was The Object
3. The Function Object
4. How Functions Become Methods
5. The Object Expression
6. Object Construction
7. The Prototype
8. Type And Non-Type
9. Constructor And InstanceOf
10. Duck Testing And Prototype Construction

-Preface-

Most books on JavaScript either compare it to the better known class based languages such as Java or C++ and even go on to show you how to make it look like the one of these.

Just JavaScript is an experiment in telling JavaScript's story "just as it is" without trying to apologise for its lack of class or some other feature. The broad features of the story are very clear but some of the small details may need working out along the way - hence the use of the term "experiment". Read on, but don't assume that you are just reading an account of Java, C++ or C# translated to JavaScript - you need to think about things in a new way. 

Just JavaScript is a radical look at the language without apologies. 

Coming Next

More functions - parameters, pass by value, expressions and constructors.

Related Articles

Javascript Jems - First class functions

JavaScript Objects With Value - valueOf and toString

JavaScript Hoisting Explained       

WAT! JavaScript, Ignorance And Prejudice       

What Exactly Is A First Class Function - And Why You Should Care  

Lambda Calculus For Programmers       

The Undefined Defined Variable       

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:0596805527>

<ASIN:193398869X>

<ASIN:0137054890>

<ASIN:1449381871>

<ASIN:1430230541>