javascript - 如何将 OOP 添加到这些 JS 函数中？

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 调用函数:

显示引擎.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();
    })
}

显示元素.js

function DisplayElement() {

}

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

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

盒子.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();
}

网格.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();
}

主要.js

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

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