Polymorphism with JavaScript

I don’t know if I picked this line up in a book or somewhere else, but the best way to describe the JavaScript language is schizophrenic.  The language itself (regardless of the hosting environment) doesn’t know if it’s Object Oriented or Functional.  It’s always been my opinion that the functional aspects of the language are more powerful than the OO features, yet the least used.  This is probably my most classically trained OOP developers don’t really like JavaScript. The other reason is because most classically trained OOP developers coming from .Net and Java ( myself included) also forget that JavaScript is also a dynamic language.  So we try to get the language do things statically as we would expect other “grown up” languages to do.

This is why a lot JavaScript libraries try to add additional layers on top of the language to make it feel more like a static language.   Polymorphism is one of those features we expect from an Object Oriented language, yet the language itself doesn’t directly support this the way we expect it to (there are workarounds, but I’m not going into those).  But when you remember that JavaScript is dynamic, it become remarkably easy.

In our current project, we are using JQuery to make modifications to a legacy web application, where we REALLY don’t want to work on the server-side logic.  In this app we have two form that are exactly the same (for our purposes at least) except for one little detail.  On one page, a critical piece of information is in a drop down list, while on the other page, it just static html content.  So we need a little polymorphic behavior here, to retrieve this information differently.

To start with, we are using the Module Pattern to both contain our public methods in a single scope and to hide some of our methods from the public api.  So we exposed a method in our return object that we expect to override.

 

var module = function(){
 // private methods
 //return object that has our public methods
 return{
   getImportantField: function(){ alert("this method is not implement, write your own"}
 }
}();

 

On the page where we need to get this from the drop down list, we include these script files:

 

<script type="text/javascript" src="Module.js"></script>
<script type="text/javascript" src="GetImportantFieldFromDropDown.js"></script>

Now we can change the behavior of our method my replacing it at runtime.

module.getImportantField = function(){
    //access the field via the drop down
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

And on the page where we need it from the text, we’ll include another file that changes the behavior of the method in question

<script type="text/javascript" src="Module.js"></script> 
<script type="text/javascript" src="GetImportantFieldFromDropDown.js"></script> 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

And of course change the behavior appropriately:

 

module.getImportantField = function(){
    //access the field via the html text
}

This approach takes advantage of the fact that browsers load source files in the order in which they are listed.  Also the fact that JavaScript treats methods like variables and you can replace their value at any time.  This opens up many new opportunities for structuring your code in dynamic languages that are not possible with static languages. Yes I know you can do similar things with delegates in C#, but you get my point.  I’m still learning what is possible with dynamic languages and utilize that to its fullest extent. 

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

This entry was posted in JavaScript. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://primedigit.com/ Will Shaver

    If you are thinking of writing ANYTHING in javascript and haven’t watched Douglas Crockford’s videos on Javascript, stop. Do not pass go, collect $200, or do anything else for the next five hours.
    Head over to:
    http://developer.yahoo.com/yui/theater/
    Parts 1-4 of “The JavaScript Programming Language”
    Parts 1-3 of “Advanced JavaScript”
    Parts 1-3 of “An Inconvenient API: The Theory of the DOM”

    Really. You’ll be glad you did.

  • http://www.lostechies.com/members/jcteague/default.aspx jcteague

    I also recommend his book, JavaScript, The Good Parts. Shows some really interesting uses and helps you avoid common pitfalls.

  • Naman

    Excellent contents by Douglas Crockford. Thanks Will :)

  • http://twitter.com/lepinekong lepine kong

    I don’t think javascript is schizophrenic it’s like the real world of physics: it’s rather like particle and wave – duality principle :)

  • http://twitter.com/joe_bolla Joseph Bolla

    Check this article out and you will like JavaScript OOP: http://www.cyberminds.co.uk/blog/articles/polymorphism-in-javascript.aspx