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

Question

I know this may seem like a repeated question, but I am currently stuck as to the best way to approach this, limited mostly by my lack of knowledge. Thus I am here to learn.

I am trying to do some simple OOP with JavaScript but coming from C# I am having a few issues with how to best solve this problem. Below I have four "Classes"; DisplayEngine , DisplayElement , Box , and Grid .

I would like Box and Grid to inherit DisplayElement , and be able to call the base functions in each of their respective functions. Almost like super.call() or something.

How would you best approach this?

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

Here is a way to do it with prototype , each "class" need to be in his own file, the important part is Grid.prototype = new DisplayElement(); This allow you to call function from the DisplayElement in Grid:

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

To just answer to your question, declare your objects such as :

function DisplayElement() {};

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

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

Then, for inheritance :

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

I disagree about those saying that you doesn't need "classes" in Javascript. In implementations such as Node.js which will handle datas must have, in my opinion, classes. It's easier (always in my opinion) to read, maintain, and use.

Answer 3

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