CODEWITHSUNDEEP
javascriptoopprototypal-inheritance
Xmindz
Xmindz

Reputation: 1282

How to override a method in Object Oriented Javascript?

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?

Upvotes: 3

Views: 1940

Answers (2)

sapy
sapy

Reputation: 9592

@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

Upvotes: 1

Denys Séguret
Denys Séguret

Reputation: 382404

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

Upvotes: 3

Related Questions