Javascript javascript中对象内部的对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6429959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Objects inside objects in javascript
提问by Michael Taufen
I'm somewhat new to Javascript, so maybe this is just a noob mistake, but I haven't found anything that specifically helps me while looking around. I'm writing a game, and I'm trying to build an object for the pause menu.
我对 Javascript 有点陌生，所以也许这只是一个菜鸟错误，但我在环顾四周时没有发现任何特别对我有帮助的东西。我正在编写一个游戏，我正在尝试为暂停菜单构建一个对象。
One of the things I would like to do is have the buttons on the menu be objects inside of the pause_menu object for the sake of organization. I'm eventually going to add event handlers to these objects, and I'd like to do that inside the pause_menu object as well. Some of the button's aren't fully coded yet, but I'd like to get at least something working before I keep going.
我想做的一件事是为了组织起见，将菜单上的按钮设置为 pause_menu 对象内的对象。我最终将向这些对象添加事件处理程序，并且我也想在 pause_menu 对象中这样做。有些按钮还没有完全编码，但我想在继续之前至少让一些东西工作。
I'm using Raphael.js v1.5.2 to render the shapes. The Raphael stuff works for the rest of the interface, but the code for that is not as pleasant to look at as this, so something similar to this would be preferable to me.
我正在使用 Raphael.js v1.5.2 来渲染形状。Raphael 的东西适用于界面的其余部分，但它的代码不像这个看起来那么令人愉快，所以类似的东西对我来说更可取。
My current problem is that nothing actually renders when I do var pause_menu = new pause_menu();
我目前的问题是，当我执行 var pause_menu = new pause_menu(); 时，实际上没有任何内容呈现。
This is the code I have so far for the 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();
OK, so here's the solution (with an event handler):
好的，这是解决方案（带有事件处理程序）：
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: {}
};
回答by Jonathan
var pause_menu = {
pause_button : { someProperty : "prop1", someOther : "prop2" },
resume_button : { resumeProp : "prop", resumeProp2 : false },
quit_button : false
};
then:
然后：
pause_menu.pause_button.someProperty //evaluates to "prop1"
etc etc.
等等等等
回答by Jo?o Pimentel Ferreira
You may have as many levels of Object hierarchy as you want, as long you declare an Object as being a property of another parent Object. Pay attention to the commas on each level, that's the tricky part. Don't use commas after the last element on each level:
您可以根据需要拥有任意多个级别的对象层次结构，只要您将对象声明为另一个父对象的属性即可。注意每个级别的逗号，这是棘手的部分。不要在每个级别的最后一个元素后使用逗号：
{el1, el2, {el31, el32, el33}, {el41, el42}}
{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);