Question

我知道这似乎是一个重复的问题，但我目前仍然坚持最好的方法来解决这个问题，主要是因为我缺乏知识。因此，我在这里学习。

我正在尝试用JavaScript做一些简单的OOP，但是来自C＃我遇到了一些如何最好地解决这个问题的问题。下面我有四个“课程”; DisplayEngine，DisplayElement，Box和Grid。

我希望Box和Grid继承DisplayElement，并且能够在每个函数中调用基函数。几乎像super.call()或其他什么。

你最好如何处理这个问题？

var DisplayEngine = function() {

    this.elements = [];

    this.add = function(element) {
        this.elements.push(element);
    };

    this.update = function() {
        this.elements.forEach(function(element) {
            element.update();
        })
    };

    this.draw = function() {
        this.elements.forEach(function(element) {
            element.draw();
        })
    };

};

var DisplayElement = function() {

    this.update = function() {
        console.log('DisplayElement update');
    };

    this.draw = function() {
        console.log('DisplayElement draw');
    };

};

var Box = function() {

    this.update = function() {
        console.log('Box update');
        // call DisplayElement.update()
    };

    this.draw = function() {
        console.log('Box draw');
        // call DisplayElement.draw()
    };

};

var Grid = function() {

    this.update = function() {
        console.log('Grid update');
        // call DisplayElement.update()
    };

    this.draw = function() {
        console.log('Grid draw');
        // call DisplayElement.draw()
    };

};

$(function() {
    var displayEngine = new DisplayEngine();
    var box = new Box();
    var grid = new Grid();

    displayEngine.add(box);
    displayEngine.add(grid);
    displayEngine.update();
    displayEngine.draw();
});

Answer 1

以下是使用 prototype 的方法，每个“类”都需要在他自己的文件中，重要的部分是Grid.prototype = new DisplayElement();这允许你打电话来自Grid中DisplayElement的函数：

DisplayEngine.js

function DisplayEngine() {

    this.elements = [];

}

DisplayEngine.prototype.add = function(element) {
    this.elements.push(element);
}

DisplayEngine.prototype.update = function() {
    this.elements.forEach(function(element) {
        element.update();
    })
}

DisplayEngine.prototype.draw = function() {
    this.elements.forEach(function(element) {
        element.draw();
    })
}

DisplayElement.js

function DisplayElement() {

}

DisplayElement.prototype.updateElement = function() {
    console.log('DisplayElement update');
}

DisplayElement.prototype.drawElement = function() {
    console.log('DisplayElement draw');
}

Box.js

function Box() {

}

Box.prototype = new DisplayElement();

Box.prototype.update = function() {
    console.log('Box update');
    this.updateElement();
}

Box.prototype.draw = function() {
    console.log('Box draw');
    this.drawElement();
}

Grid.js

function Grid() {

}

Grid.prototype = new DisplayElement();

Box.prototype.update = function() {
    console.log('Grid update');
    this.updateElement();
}

Box.prototype.draw = function() {
    console.log('Grid draw');
    this.drawElement();
}

Main.js

$(function() {
    var displayEngine = new DisplayEngine();
    var box = new Box();
    var grid = new Grid();

    displayEngine.add(box);
    displayEngine.add(grid);
    displayEngine.update();
    displayEngine.draw();
});

Answer 2

要回答您的问题，请声明您的对象，例如：

function DisplayElement() {};

DisplayElement.prototype.update = function() {
    console.log('DisplayElement update');
};
DisplayElement.prototype.draw = function() {
    console.log('DisplayElement draw');
};

// ...
// Now, instanciation :
var myElement = new DisplayElement();

然后，继承：

function Box() {
    DisplayEngine.call(this, arguments); // Call the super constructor
}
Box.prototype = Object.create(DisplayEngine.prototype); // "Apply" the inheritance
Box.prototype.constructor = Box; // Redefine the constructor to Box because it was overriden by the previous line

我不同意那些说你在Javascript中不需要“课程”的人。在诸如Node.js之类的实现中，在我看来，它将处理数据必须具有的类。 <读取，维护和使用更容易（总是在我看来）。

Answer 3

您可以像Shryme解释的那样使用原型样式，或者您可以使用在javascript中模仿经典oop样式的库，检查分类{js}：http://www.classingjs.co.nf/

如何在这些JS函数中添加OOP？

3 个答案: