Javascript复合模式，无法正确使用覆盖的方法

我实现了一个javascript合成器模式（见下面的代码）

在我的主类中，我实例化了MenuItem或Menu。我必须调用组件上的方法

update（）

，它们应该返回相应的代码

但是，它不会返回正确数量的

totalitems

。它总是返回在

MenuComponent

中定义的默认值0

我认为这与

这个

关键字有关，但我找不到确切的解决办法

菜单项：

//MENU ITEM
//----------
var MenuItem = function(id) {
    MenuComponent.apply(this, [id, name]);
};

MenuItem.prototype = Object.create(MenuComponent.prototype);
MenuItem.prototype.constructor = MenuItem;

MenuItem.prototype.update = function() {
    //works
    console.log(this.ingredients)    
    //Doesnt work, this should display same as this.ingredients
    console.log(this.calculateIngredients())
    console.log("--------------")
};

//MENU
//--------
var Menu = function(id, name) {
    MenuComponent.apply(this, [id, name]);
    this.menuitems = [];
};

Menu.prototype = Object.create(MenuComponent.prototype);
Menu.prototype.constructor = Menu;

Menu.prototype.add = function(menuitem) {
    this.menuitems.push(menuitem);
};
Menu.prototype.remove = function(menuitem) {
    for(var s, i = 0; s = this.getMenuItem(i); i++) {
        if(s == menuitem) {
            this.menuitems.splice(i, 1);
            return true;
        }

        if(s.remove(menuitem)) {
            return true;
        }
    }
    return false;
};
Menu.prototype.getMenuItem = function(i) {
    return this.menuitems[i];
};
Menu.prototype.calculateIngredients = function() {
    this.ingredients = 0;
    for(var key in this.menuitems) {
        this.ingredients += this.menuitems[key].calculateIngredients();
    }
    return this.ingredients;
};

菜单：

//MENU ITEM
//----------
var MenuItem = function(id) {
    MenuComponent.apply(this, [id, name]);
};

MenuItem.prototype = Object.create(MenuComponent.prototype);
MenuItem.prototype.constructor = MenuItem;

MenuItem.prototype.update = function() {
    //works
    console.log(this.ingredients)    
    //Doesnt work, this should display same as this.ingredients
    console.log(this.calculateIngredients())
    console.log("--------------")
};

//MENU
//--------
var Menu = function(id, name) {
    MenuComponent.apply(this, [id, name]);
    this.menuitems = [];
};

Menu.prototype = Object.create(MenuComponent.prototype);
Menu.prototype.constructor = Menu;

Menu.prototype.add = function(menuitem) {
    this.menuitems.push(menuitem);
};
Menu.prototype.remove = function(menuitem) {
    for(var s, i = 0; s = this.getMenuItem(i); i++) {
        if(s == menuitem) {
            this.menuitems.splice(i, 1);
            return true;
        }

        if(s.remove(menuitem)) {
            return true;
        }
    }
    return false;
};
Menu.prototype.getMenuItem = function(i) {
    return this.menuitems[i];
};
Menu.prototype.calculateIngredients = function() {
    this.ingredients = 0;
    for(var key in this.menuitems) {
        this.ingredients += this.menuitems[key].calculateIngredients();
    }
    return this.ingredients;
};

菜单组件

//MenuComponent
//-------------
var MenuComponent = function(id, name) {

    if(this.constructor === MenuComponent) {
        throw new Error("Can't instantiate abstract class");
    }

    this.id = id;
    this.name = name;
    this.ingredients = 0;
};

MenuComponent.prototype.calculateIngredients = function() {
    return this.ingredients;
};
MenuComponent.prototype.update = function() {
    console.log(this.ingredients)
    console.log("-----------------")
};

示例

// HANDLER
var menuitem1 = new MenuItem(1)
    , menuitem2 = new MenuItem(2)
    , menuitem3 = new MenuItem(3)
    , menuitem4 = new MenuItem(4)
    , menuitem5 = new MenuItem(5)
    , menuitem6 = new MenuItem(6)
    , menuitem7 = new MenuItem(7)
    , menu = new Menu(1);

menu.add(menuitem1);
menu.add(menuitem2);
menu.add(menuitem3);
menu.add(menuitem4);

menuitem1.ingredients = 1
menuitem2.ingredients = 5
menuitem3.ingredients = 7;
menuitem4.ingredients = 2


// lets say i want to update the ingredient count of the following
menuitem1.update();
menuitem2.update();
menu.update();

//the update goes wrong, it doesnt display the correct amount, it alwasy displays 0 on the amounts where i commented

而不是

MenuComponent.prototype.update = function() {
    console.log(this.ingredients) // 0
};

你想打电话吗

MenuComponent.prototype.update = function() {
    console.log(this.calculateIngredients()) // 15
};

---

JSFIDLE上的全部代码：

您能创建一个小提琴来描述您的问题吗？我更新了我的帖子，对代码进行了更好的解释，并对一些内容进行了调整，使其更易于理解。我还添加了一个JSFIDLE。感谢您指出这一点：）删除方法

MenuComponent.prototype.calculateindents

，但我必须实现它两次，一次在MenuItem中，一次在菜单中？