Activate your free membership today | Log-in

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

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

Functional inheritance:

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

Related Content:

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.