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

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.

 

JustJavaScripticon

 

Just JavaScrpt 
A Radical Look At JavaScript

  1. In The Beginning Was The Object
  2. The Function Object
  3. How Functions Become Methods
  4. The Object Expression
  5. Object Construction

 

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

 

Banner


Getting Started With jQuery - Filters

Mastering the core of jQuery is first a matter of understanding selectors and then DOM manipulation. Filters are often confused with selectors but they are quite different and serve an important purpo [ ... ]



Javascript data structures - the binary tree

Binary trees in JavaScript? Easy with the right storage mapping function. Find out how to code a binary tree right up to a depth first traversal.


Other Articles

<ASIN:0596805527>

<ASIN:193398869X>

<ASIN:0137054890>

<ASIN:1449381871>

<ASIN:1430230541>



Last Updated ( Friday, 05 September 2014 )
 
 

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