I looked around for the problem when you want to inherit from a JavaScript "class" with overriding a method, but I didn't find any solution. Today I tried this, which is working, but not very nice coding:

var mybox = Class.create();
mybox.prototype = {
  update: function() {
    this.div.innerText = new Date();
  }
}

var mybox2 = Class.create();
mybox2.prototype = (new mybox()).extend({
  update: function() {
    this.base_update();
    this.div.innerText += "jjj";
  }
});

As you can see in the mybox2 I can call the base update method using this.base_update(). Are there any other ideas on how to implement inheritance with overriding base methods, but don't losing them?

4 Comments

• Hermann Klinke said Sunday, November 6, 2005 10:03:00 AM

  I am working on a framework that makes this kind of stuff really easy (making javascript really 100% object oriented), but in the meantime you could hack it this way:
  
  //makes it possible to inherit classes
  Function.prototype.inherits = function(baseClass)
  {
  this.prototype = new baseClass;
  this.prototype.Base = baseClass.prototype;
  //use own constructor
  this.prototype.constructor = this.constructor;
  };
  
  
  function BaseClass()
  {
  }
  
  //method to override
  BaseClass.prototype.method = function()
  {
  alert("base method called.");
  }
  
  
  function DerivedClass()
  {
  }
  //this must be done right after the constructor
  DerivedClass.inherits(BaseClass);
  
  //override method
  DerivedClass.prototype.method = function()
  {
  this.Base.method();
  alert("new method called.");
  }
  
  var instance = new DerivedClass();
  
  instance.method();
  
  I plan on publishing that framework...I could notify you if you are interested.

• Michael Schwarz said Sunday, November 6, 2005 12:12:00 PM

  Yes, I found this at the crockford web site, too. As I can remember I could not use
  
  var instance = new DerivedClass(param1, param2);
  
  where param1 and param2 where used for the BaseClass constructor, too. I'm searching for something like the .inherits method and the Class.create (prototype.js).

• Hermann Klinke said Sunday, November 6, 2005 2:16:00 PM

  Sorry, I don't know prototype.js and I am not sure if I understand your problem. You could use param1 and param2 the same way you do it in C# (well the syntax is a little different):
  
  function BaseClass(method1, method2)
  {
  this.method1 = method1;
  this.method2 = method2;
  }
  
  function DerivedClass(method1, method2)
  {
  this.Base.constructor.call(this, method1, method2);
  }
  
  
  var instance = new DerivedClass(function(){alert("Hello");}, function(){alert("World");});
  
  Hope that helps!
  

• David Chandler said Tuesday, November 22, 2005 8:54:00 PM

  I'm not sure if this is the correct way to solve the problem, but I was trying to do the same thing today and found that this will work:
  
  var mybox = Class.create();
  mybox.prototype.initialize = function() {}
  mybox.prototype.update = function() {
  alert(new Date());
  }
  
  var mybox2 = Class.create();
  mybox2.prototype = (new mybox()).extend({
  update: function() {
  mybox.prototype.update.apply(this, arguments);
  alert("jjj");
  }
  });
  
  var test1 = new mybox();
  test1.update();
  var test2 = new mybox2();
  test2.update();
  
  mybox.prototype.update.apply calls the 'base class' apply method.