Wednesday, October 31st, 2007

Transitioning from Java Classes to JavaScript Prototypes

Category: Articles, Examples, JavaScript

<p>To class or not to class, that has been a question than many developers have faced as they came from class based OO worlds into the Prototype Oriented world of JavaScript. Much pain has endured for those that try to contort it.

Peter Michaux has detailed transitioning from Java Classes to JavaScript prototypes by looking at the Observer/Observable pattern and showing various implementations in Java and JavaScript ending up with his favourite mixin-able solution:

javascript
< view plain text >
  1. var observablize;
  2.  
  3. (function() {
  4.  
  5.     var observable = {
  6.  
  7.       addObserver: function(observer) {
  8.           if (!this.observers) {
  9.               this.observers = [];
  10.           }
  11.           this.observers.push(observer);
  12.       },
  13.  
  14.       notifyObservers: function() {
  15.           for (var i=0; i<this.observers.length; i++) {
  16.               this.observers[i].update();
  17.           }
  18.       }
  19.      
  20.     };
  21.    
  22.     observablize = function (subject) {
  23.         for (var p in observable) {
  24.             subject[p] = observable[p];
  25.         }
  26.     }
  27.    
  28. })();
  29.  
  30. // ---------------------------
  31.  
  32. function WeatherModel() {}
  33.  
  34. observablize(WeatherModel.prototype);
  35.  
  36. WeatherModel.prototype.setTemperature = function(temp) {
  37.     this.temp = temp;
  38.     this.notifyObservers();
  39. };
  40.  
  41. WeatherModel.prototype.getTemperature = function() {
  42.     return this.temp;
  43. };
  44.  
  45. // ---------------------------
  46.  
  47. function CurrentConditionsView(model) {
  48.     this.model = model;
  49.     model.addObserver(this);
  50. }
  51.  
  52. CurrentConditionsView.prototype.update = function() {
  53.     alert(this.model.getTemperature());
  54. };
  55.  
  56. // ---------------------------
  57.  
  58. var victoriaWeather = new WeatherModel();
  59. var victoriaNews = new CurrentConditionsView(victoriaWeather);
  60.  
  61. victoriaWeather.setTemperature(15.3);
  62. victoriaWeather.setTemperature(17.0);
  63. victoriaWeather.setTemperature(14.7);

Related Content:

Posted by Dion Almaer at 8:40 am
1 Comment

+++--
3.2 rating from 22 votes

1 Comment »

Comments feed TrackBack URI

Sadly, the basic premise of the article, “simulating class-based inheritance in JavaScript really doesn’t work” is no longer true. Prototype 1.6 features a rather elegant solution to this problem in the form of the “$super” argument (see http://prototypejs.org/2007/8/15/prototype-1-6-0-release-candidate for details).

The mixin and observable patterns are still useful, but no longer essential workarounds where true inheritance is required.

Comment by Broofa — November 1, 2007

Leave a comment

You must be logged in to post a comment.