• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 578
  • 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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