How do I override a base class method in Javascript

I have a base class defined as follows
BaseClass = function(id)
{
this.ID = document.getElementById(id);
this.Show() = function() {
document.getElementById(this.ID).style.display = 'block';
};
}
and an inherited class defined as follows

Label = function(id)
{
this.inheritFrom = BaseClass;
this.inheritFrom(id);
}
I want to introduce a Show method on the Label class so that it overrides the base class method, calls the base class method and adds it's own extra implementation for this method.  How can I do this?
Thanks
LVL 1
kayhustleAsked:
Who is Participating?
 
Lolly-InkConnect With a Mentor Commented:
Here is a working example based on your original code. There were some errors in BaseClass which have been fixed:
<html>
<script>
   BaseClass = function(id)
   {
      this.id = id;
      this.Show = function()
      { 
         document.getElementById(this.id).style.display = 'block';
      }
   }
 
   Label = function(id)
   {
      this.inheritFrom = BaseClass;
      this.inheritFrom(id);
      this._Show = this.Show;
      this.Show = function()
      {
         this._Show();
         document.getElementById(this.id).style.backgroundColor = 'red';
      }
   }
 
   var one = new BaseClass("spanOne");
   var two = new Label("spanTwo");
 
   function load()
   {
      window.setTimeout("changeSpans()", 2000);
   }
 
   function changeSpans()
   {
      one.Show();
      two.Show();
   }
</script>
<body onload="load()">
   <span id="spanOne">One</span>
   <span id="spanTwo">Two</span>
</body>
</html>

Open in new window

0
 
Guy Hengel [angelIII / a3]Billing EngineerCommented:
use the "super" "object" to call the inherited classes method.
0
 
kayhustleAuthor Commented:
How do I do that?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Guy Hengel [angelIII / a3]Billing EngineerCommented:
this should explain it all:
http://phrogz.net/JS/Classes/OOPinJS2.html
0
 
kayhustleAuthor Commented:
Can you give me a code example, not sure I follow your link.
0
 
kayhustleAuthor Commented:
Yeah I tried about 4 different variations of what was given in the article and none of them worked.
0
 
kayhustleAuthor Commented:
Perfect!
0
All Courses

From novice to tech pro — start learning today.