Объекты внутри объектов в javascript

Я немного новичок в Javascript, так что, может быть, это просто ошибка в нобе, но я не нашел ничего, что специально помогает мне, когда я оглядываюсь. Я пишу игру, и я пытаюсь создать объект для меню паузы.

Одна из вещей, которые я хотел бы сделать, - это кнопки в меню, которые являются объектами внутри объекта pause_menu для организации. В конечном итоге я собираюсь добавить обработчики событий к этим объектам, и я хотел бы сделать это внутри объекта pause_menu. Некоторые из кнопок еще не полностью закодированы, но я хотел бы получить хотя бы что-то, прежде чем продолжить.

Я использую Raphael.js v1.5.2 для визуализации фигур. Материал Рафаэля работает для остальной части интерфейса, но для этого кода не так приятно смотреть, как это, поэтому что-то похожее на это было бы предпочтительнее для меня.

Моя текущая проблема заключается в том, что ничего не получается, когда я делаю var pause_menu = new pause_menu();

Это код, который у меня есть для меню паузы:

//Pause Menu Object:
function pause_menu() {

    function pause_button() {
        this.button = game.rect(0, 350, 150, 50, 5);
        this.text =  game.text(75, 375, 'PAUSE');
    }
    function resume_button() {
        this.button;
        this.text;
    }
    function quit_button() {
        this.button;
        this.text;
    }
    this.pause_button = new pause_button(); //the button that the user presses to pause the game (I want an event handler on this to trigger .show() method for presently hidden menu items)
    this.resume_button = new resume_button();
    this.quit_button = new quit_button();
    this.box = game.rect(150, 50, 400, 300, 5).hide(); //the box that surrounds the menu when it appears
}
var pause_menu = new pause_menu();

ОК, поэтому здесь решение (с обработчиком событий):

var pause_menu = {

    pause_button: { button : game.rect(0, 350, 150, 50, 5).click(function (event){
                       pause_menu.menu_box.show();
                  }), text : game.text(75, 375, 'PAUSE') },
    menu_box: game.rect(150, 50, 400, 300, 5).hide(),
    resume_button: {},
    quit_button: {}

};

Ответ 1

var pause_menu = {
    pause_button : { someProperty : "prop1", someOther : "prop2" },
    resume_button : { resumeProp : "prop", resumeProp2 : false },
    quit_button : false
};

то

pause_menu.pause_button.someProperty //evaluates to "prop1"

и т.д.

Ответ 2

У вас может быть столько уровней иерархии объектов, сколько вы хотите, поскольку вы объявляете объект как свойство другого родительского объекта. Обратите внимание на запятые на каждом уровне, что сложная часть. Не используйте запятые после последнего элемента на каждом уровне:

{el1, el2, {el31, el32, el33}, {el41, el42}}

var MainObj = {

  prop1: "prop1MainObj",
  
  Obj1: {
    prop1: "prop1Obj1",
    prop2: "prop2Obj1",    
    Obj2: {
      prop1: "hey you",
      prop2: "prop2Obj2"
    }
  },
    
  Obj3: {
    prop1: "prop1Obj3",
    prop2: "prop2Obj3"
  },
  
  Obj4: {
    prop1: true,
    prop2: 3
  }  
};

console.log(MainObj.Obj1.Obj2.prop1);