如何覆盖面向对象的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?

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

Answer 2

@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