Just JavaScript - How Functions Become Methods
Just JavaScript - How Functions Become Methods
Written by Ian Elliot   
Thursday, 15 May 2014
Article Index
Just JavaScript - How Functions Become Methods
Function Objects Are Late Bound
The JavaScript Difference


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() {

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() {

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.

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. 



  • 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 
    then this references myObject. We say that the function or method is bound to myObject.

  • Functions that are methods use
    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:
      function body
  • You can early bind a method to an object using:myObject.property=function(parameters){
      function body

  • 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 


A Radical Look At JavaScript


  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


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, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.




blog comments powered by Disqus



Master JavaScript Regular Expressions

Regular expressions can seem complex but the biggest reason for this is that most programmers don't take them seriously enough. Spend just a little time finding out how they work and you can do amazin [ ... ]

jQuery 3 - Consuming Promises

Promises are a way of organizing asynchronous calls that is better than using callbacks. The callbacks are still there but they are come with a degree of organization. Previously jQuery was criticized [ ... ]

Other Articles






Last Updated ( Sunday, 10 May 2015 )

RSS feed of all content
I Programmer - full contents
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.