Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 568
  • Last Modified:

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
0
kayhustle
Asked:
kayhustle
  • 4
  • 2
1 Solution
 
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
 
Guy Hengel [angelIII / a3]Billing EngineerCommented:
this should explain it all:
http://phrogz.net/JS/Classes/OOPinJS2.html
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
Lolly-InkCommented:
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
 
kayhustleAuthor Commented:
Perfect!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now