JavaScript polymorphism

In JavaScript, but also in other languages, polymorphism is the ability of a method to perform different tasks. To implement polymorphism through JavaScript objects (also called classes, though JavaScript is a class-free language), we have to grasp how the prototype property works. The first problem with this approach is related to the fact that a method of a child class with the same name of an existing one of the parent class is overridden in the child class. Also, this affects even the original method of the parent class. To circumvent this problem, we have to write something like this:

function Message(subject) {

    this.subject = subject;
    this.send = function() {
    
      alert('Message sent!');
    
    }

}


function SMS (){};


SMS.prototype = new Message('Test');
SMS.prototype.constructor = SMS;

SMS.prototype.send = function() {


  alert('SMS sent!');

}

Here the send() method of the Message class will alert 'Message sent!', while the same method on the SMS class (which extends its base class) will alert 'SMS sent'. This happens because we've specified as constructor the SMS class instead of simply augmenting the prototype property. So far so good. Now we want something more, say, like modifying the action of the child method. Here's how it can be done:

function Email(to) {

    this.to = to;

}


Email.prototype.send = function() {

    alert('Email sent');

}


function HTMLEmail () {};

HTMLEmail.prototype = new Email('test@localhost');
HTMLEmail.constructor.prototype = HTMLEmail;

HTMLEmail.prototype.send = function() {

    alert('[Content-Type: text/html] ');
    
    this.constructor.prototype.send.call(this); // this.constructor.prototype points to Email
    


}

Here there have been some slight changes: we don't modify directly the prototype property of the derived class, but its constructor's prototype. We use the call function that invokes the send() method of the parent class. In fact, in this case the this keyword points to the parent class. In this way, you can actually have a method that performs two different tasks, thus improving the overall efficiency of your code. You can see these tests here.