Friday, November 13th, 2009

Javascript Inheritance Patterns: Learning from Closure

Category: Closure, JavaScript

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):

< View plain text >
javascript

  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:

< View plain text >
javascript

  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"};

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.