Question

我试图在interface中实施JS类似的架构，如C#中所示。并遇到了绊脚石。这是代码示例：

    // 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();
    }

在第一堂课中，我定义了一个方法addUserToList，我在第二课ChatUIBuider中覆盖了该方法。还使用其原型向基类添加了一个方法removeUserFromList。

我的问题是，即使在子类中重写了它之后，addUserToList方法仍会调用父类方法。为什么呢？

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

有人能告诉我这是否是我正在做的正确方法？

Answer 1

我建议这个结构：

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扩展IUIBuilder并继承其功能，但会覆盖addUserToList函数。

在下面的代码中，将调用两个构造函数，但只会调用覆盖的addUserToList函数：

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

请参阅demonstration

Answer 2

@Denys重组了整个代码，但并没有完全指出问题。问题是addUserToList 不是您父类的原型方法，它是一个this方法，为每个实例复制而不是sahred。因此，只需将其转换为prototype方法即可解决问题。

 // 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

如何覆盖面向对象的Javascript中的方法？

2 个答案: