How to override a method in Object Oriented Javascript?

Question

I was trying to implement an interface like architecture in JS as followed in C#. And met with a stumbling block. Here is the code sample:

    // Interface for UIBuilder classes
    function IUIBuilder() {
        this.addUserToList = function () {
            alert('parent: added');
        };
    }

    // Class implementing the IUIBuilder
    function ChatUIBuider() {
        IUIBuilder.prototype.addUserToList = function () {
            alert('child: added');
        };
        IUIBuilder.prototype.removeUserFromList = function () {
            alert('child: removed');
        };

        return new IUIBuilder();
    }

In the first class, I've defined a method addUserToList which I override in the second class ChatUIBuider. Also added one more method removeUserFromList to the base class using its prototype.

My issue is, the addUserToList method still invokes the parent class method even after it has got overridden in the child class. Why?

    var builder = new ChatUIBuider();
    builder.removeUserFromList(); // Invokes the child class method. - CORRECT
    builder.addUserToList(); // Invokes the base class method- WHY??

Could anyone tell me if this is the correct way I am doing?

Denys Séguret · Accepted Answer · 2012-11-29 07:28:53Z

3

I suggest this construct :

function IUIBuilder() {
};
IUIBuilder.prototype.addUserToList = function () {
    alert('parent: added');
};

// Class extending the IUIBuilder
function ChatUIBuider() {
}
ChatUIBuider.prototype = new IUIBuilder();
ChatUIBuider.prototype.addUserToList = function () {
        alert('child: added');
};
ChatUIBuider.prototype.removeUserFromList = function () {
        alert('child: removed');
};

ChatUIBuider extends IUIBuilder and inherits its functions but overrides the addUserToList function.

In the following code, both constructors will be called but only the overriding addUserToList function will be called :

var chat = new ChatUIBuider();
chat.addUserToList();

See demonstration

answered Nov 29, 2012 at 7:28

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sapy · Accepted Answer · 2016-02-25 08:17:14Z

@Denys restructured the entire code , without exactly pointing out the issue. issue is addUserToList is not a prototype method of your parent class , it's a this method which is copied for every instance and not sahred. So just converting it to a prototype method fixes the issue.

 // Interface for UIBuilder classes
    function IUIBuilder() {
    }
    IUIBuilder.prototype.addUserToList = function () {
            alert('parent: added');
    };

    // Class implementing the IUIBuilder
    function ChatUIBuider() {
        IUIBuilder.prototype.addUserToList = function () {
            alert('child: added');
        };
        IUIBuilder.prototype.removeUserFromList = function () {
            alert('child: removed');
        };

        return new IUIBuilder();
    }
    var builder = new ChatUIBuider();
    builder.removeUserFromList(); // Invokes the child class method. - CORRECT
    builder.addUserToList(); // Invokes the CHILD CLASS's METHOD

Collectives™ on Stack Overflow

How to override a method in Object Oriented Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related