Friday, November 13th, 2009

Javascript Inheritance Patterns: Learning from Closure

Category: Closure, JavaScript

<>p>The library portion of Google’s Closure not only gives us a new API to work with, but also adds another piece of mature code to the public domain, where it can be studied and scrutinized. Something we might normally have done with View Source if not for the compression techniques in effect.

A new article by Michael Bolin looks at inheritance patterns in Javascript, with a special focus on Closure. He does a thorough job of weighing up Closure’s use of the pseudoclassical inheritance pattern against what Doug Crockford labels the functional pattern.

Pseudoclassical inheritance (Closure):

javascript
< view plain text >
  1. /**
  2.  * @param {string} phoneNumber
  3.  * @param {string=} signature
  4.  * @constructor
  5.  * @extends {Phone}
  6.  */
  7. SmartPhone = function(phoneNumber, signature) {
  8.   Phone.call(this, phoneNumber);
  9.  
  10.   /**
  11.    * @type {string}
  12.    * @private
  13.    */
  14.   this.signature_ = signature || 'sent from ' + this.getPhoneNumber();
  15. };
  16. goog.inherits(SmartPhone, Phone);
  17.  
  18. /**
  19.  * @param {string} emailAddress
  20.  * @param {string} message
  21.  */
  22. SmartPhone.prototype.sendEmail = function(emailAddress, message) {
  23.   // Assume sendMessage() is globally available.
  24.   sendMessage(emailAddress, message + '\n' + this.signature_);
  25. };
  26.  
  27. /** @override */
  28. SmartPhone.prototype.getDescription() = function() {
  29.   return SmartPhone.superClass_.getDescription.call(this) +
  30.       ' It can also send email messages.';
  31. };
  32.  
  33. var smartPhone = new SmartPhone('5555555', 'Adios'};

Functional inheritance:

javascript
< view plain text >
  1. var smartPhone = function(spec) {
  2.   var that = phone(spec);
  3.   spec.signature = spec.signature || "sent from " + that.getPhoneNumber();
  4.  
  5.   that.sendEmail = function(emailAddress, message) {
  6.     // Assume sendMessage() is globally available.
  7.     sendMessage(emailAddress, message + "\n" + spec.signature);
  8.   };
  9.  
  10.   var super_getDescription = that.superior("getDescription");
  11.   that.getDescription = function() {
  12.     return super_getDescription() + " It can also send email messages.";
  13.   };
  14.  
  15.   return that;
  16. };
  17.  
  18. var mySmartPhone = smartPhone({"phoneNumber": "5555555", "signature": "Adios"};

Related Content:

  • Developing composite applications with PHP - Advanced AJAX
    A better way to store client-side ID, main work on the server side (requiring close collaboration between the server-side PHP script and the...
  • Putting ASP.NET AJAX into action
    Alessandro Gallo is a Microsoft MVP in ASP.NET, an active contributor to the ASP.NET AJAX Control Toolkit and one of three authors of "ASP.NET AJAX in...
  • ICommerce Design Strategies
    GemStone has been in the distributed object world for well over a decade, first with Smalltalk and now with Java. This document and FoodSmart, the...
  • The Art of Java Web Development
    Choosing the right web framework can be a daunting task, even for the experienced. How many of us have time to tinker with all of them, let alone just...
  • Integrating Java and Erlang
    This article is an introductory tour of Erlang by building a simple client server application. Following this we'll reverse engineer the application...

Posted by Michael Mahemoff at 5:04 pm
2 Comments

++---
2.3 rating from 37 votes

2 Comments »

Comments feed TrackBack URI

I like the arguments that are made here, but there is one major important factor that is missed. With closure, your using a lot of sugar from a library to make things work – you need to be aware of how a third party will manage versions of their library and as well its compiler. With the functional example, your using pure javascript. So this really becomes an argument of what tool is better for the job. Highly complex project (IE google maps)? Perhaps Closure will benefit you.

Comment by fernmicro — November 15, 2009

Great Post! I am really interested in Google Closure Tools and wrote a few articles based on my experience. You may check the following article to understand how well Closure Compiler works: Google Closure Compiler vs. YUI Compressor – Comparing the Javascript Compression Tools

Comment by bloggingdev — November 16, 2009

Leave a comment

You must be logged in to post a comment.