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:

  • Transitioning to Java 8
    At JavaOne, the vice president of Java development at Oracle opened up about Java 8 trends and...
  • Junk JavaScript?
    Should JavaScript and HTML be replaced with "proper" languages that might give more bang for the buck in rich Internet applications (RIAs)? One reader...
  • Contaminated Java script
    +++--
    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.