Understanding prototypes and "classes"

Question

Coming from a low level C background, I'm having difficulty understanding this prototype, function constructor, and "classical classing" constructs.

For the purpose of learning, I've tried to design a menu system.

'menuItem' should have a 'name' property, and a 'remove' function.
'food' should be based on menuItem, and should have no custom properties or functions for the sake of simplicity.
'drink' should be based on menuItem, and and should have no custom properties or functions for the sake of simplicity.
'menu' should contain an array of 'food's, 'drink's and corresponding functions to add new 'food's and 'drink's.

The result should be usable like so:

var testmenu = new menu();
testmenu.addfood("burger");
testmenu.addfood("chips");
testmenu.adddrink("fanta");
testmenu.adddrink("coke");

alert(JSON.stringify(testmenu));

testmenu.foods[0].remove();

alert(JSON.stringify(testmenu));

This is what I came up with:

function menu() {
    var that = this;

    this.foods = new Array();
    this.drinks = new Array();

    this.addfood = function(name) {
        that.foods[that.foods.length] = new food(name);

        // this seems silly, is there a way of getting the index in the array without giving it an index property?
        that.foods[that.foods.length - 1].index = that.foods.length - 1;

        // can't store the menu
        //that.foods[that.foods.length - 1].menu = that;

        return that.foods.length - 1;
    }

    this.adddrink = function(name) {
        that.drinks[that.drinks.length] = new drink(name);

        // same problem as with food
        that.drinks[that.drinks.length - 1].index = that.drinks.length - 1;
        //that.drinks[that.drinks.length - 1].menu = that;

        return that.drinks.length - 1;
    }
}

var menuItem = {
    name: "New menuItem",
    remove: function() {
        alert("Remove: " + this.name + " at index " + this.index);

        // No way of telling what menu the menuItem is in, I have to assume testmenu 
        testmenu[this.menuItemType].splice(this.index, 1);
        //this.menu[this.menuItemType].splice(this.index, 1);
    }
};

function food(name) {
    if(name) this.name = name;
    this.menuItemType = "foods";
}
food.prototype = menuItem;

function drink(name) {
    if(name) this.name = name;
    this.menuItemType = "drinks";
}
drink.prototype = menuItem;

var testmenu = new menu();
testmenu.addfood("burger");
testmenu.addfood("chips");
testmenu.adddrink("fanta");
testmenu.adddrink("coke");

alert(JSON.stringify(testmenu));

testmenu.foods[0].remove();

alert(JSON.stringify(testmenu));

There are two problems I am having:

there is no way for the remove function to know which menu to remove the menuItem from.
there is no way to get the index of an array item, you have to store it as a property.

By putting MenuItems in Arrays held by a Menu, you're using composition. Naturally the items won't have a back reference to the menu unless you create such a reference on each item. If you have a back reference, you'd need to search the Array for the item to remove to get its index. It would seem to make more sense to have `.remove()` on the Menu rather than on each MenuItem since the menu should manage its own state. Then pass the item to remove, find it in the Array, and remove it. — cookie monster, Jul 12 '14 at 20:04
I agree that having the remove in menu rather than in each menuItem makes more sense. I'm new to JavaScript and am trying to do it in an OOP style like this mostly for learning since I've never really tried OOP before. — Jimmay, Jul 12 '14 at 20:07
One more thing, if each MenuItem can get some unique ID, you could use an Objects (key/value pairs) instead of Arrays to hold the individual items. Then it's just `delete this.foods[food.id]`, where `this` is the Menu, and `food` is the food object to be removed. — cookie monster, Jul 12 '14 at 20:08

score 0 · Accepted Answer · edited May 23 '17 at 10:32

Your prototypes and "classes" look quite fine.

there is no way for the remove function to know which menu to remove the menuItem from.

Sure, how would you know? You might want to pass it as a parameter. However, the more OOP way would be to put the remove method on the menu class (the collection, on which also the add methods are defined) and to pass the item as an argument, instead of having it on the menuitem.

 // can't store the menu
 //that.foods[that.foods.length - 1].menu = that;

What stops you? Sure, JSON.stringify throws an error if you pass in an object with cyclic references. You might want to use a debugger, or at least check the error console. Or try to do console.log(testmenu) instead of the alert, so that you don't need to serialize it but can dynamically inspect it.

there is no way to get the index of an array item, you have to store it as a property.

Well, you could search for it using the indexOf array method if you don't want to store the index. It would become inaccurate anyway as soon as you remove other items.

Understanding prototypes and "classes"

1 Answers1