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?

Answer 1

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