자바 스크립트 합성 패턴, 덮어 쓰기 된 메소드를 올바르게 사용할 수 없습니다.

Question

나는 구현 한 자바 스크립트 합성기 패턴이 있습니다 (아래 코드 참조).

내 주 수업에서는 MenuItem 또는 메뉴를 인스턴스화합니다. 구성 요소에서 update() 메서드를 호출해야하며 해당 코드를 반환해야합니다.

그러나 정확한 금액은 totalitems입니다. alwasy는 MenuComponent에 정의 된 기본값 0을 반환합니다.

나는 그것이 this 키워드와 관련이 있다고 생각하지만 정확한 해결책을 찾을 수 없습니다.

MenuItem의

//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

//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 

JSFiddle

Answer 1

대신

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

당신은 jsfiddle에

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

전체 코드를 호출 할 : http://jsfiddle.net/krzysztof_safjanowski/gjTb4/