我制作了这个对象来处理游戏中的不同选项。
var options =
{
Option: function(name, value, shortcut)
{
this.name = name;
this.value = value;
this.shortcut = shortcut;
this.texte = createElement("span",this.name + " : " + this.shortcut + "<br />");
this.texte.parent("options");
this.texte.id(this.name);
},
toggle: function(shortcut)
{
for (var o in this)
{
console.log(o);
console.log(o.shortcut);
if (o.shortcut == shortcut)
{
o.value = !o.value;
if (o.value)
{
o.texte.style("fontWeight","bold");
o.texte.style("color","green");
}
else
{
o.texte.style("fontWeight","normal");
o.texte.style("color","red");
}
addText("Toggled"+ o.name);
}
}
},
initiate: function()
{
this.randomSpeed = new this.Option("Random Speed", true,"R");
//this.randomSpeed.show();
this.oneBall = new this.Option("Spawn one ball", false,"O");
//this.oneBall.show();
this.gravity = new this.Option("gravity", false,"G");
//this.gravity.show();
this.collision = new this.Option("Collision", false,"C");
//this.collision.show();
this.paintBackground = new this.Option("Paint mode",false,"P");
//this.paintBackground.show();
this.wall = new this.Option("Wall Collision", false,"W");
//this.wall.show();
this.unstuck = new this.Option("Unstuck", false,"U");
//this.unstuck.show();
this.blow = new this.Option("Mouse blow", false,"B");
//this.blow.show();
this.attraction = new this.Option("Mouse Attraction", false,"A");
//this.attraction.show();
this.superAttraction = new this.Option("Super attraction", false,"A");
//this.superAttraction.show();
}
};
目的是处理游戏的所有不同选项，以便我稍后可以添加新选项并使用已存在的相同代码。
当我将新选项实现到游戏中时，我使用创建者函数 Option(在主对象选项内)来实例化新选项。
我的问题出在 for (var o in this) 循环上。
console.log(o); 给出了我期望的输出
"Option" "toggle" "initiate" "randomSpeed" "oneBall" "gravity" "collision" "paintBackground" "wall" "unstuck" "blow" "attraction" "superAttraction"
但是 console.log(o.shortcut); 没有返回任何内容!
我 checkin 了console of my browser ，该对象存在，并且已正确实例化
谢谢!
——————————————————————————————
此外，我正在寻找这种设计的示例，但我找不到任何与此类似的东西。你有我可以引用的例子吗？我真的很好奇通常是如何完成的。
最佳答案
对 this 对象的成员进行引用的方式是错误的，
在代码 for (var o in this) 中，变量 o 将引用 this 对象中项目的索引，因此为了引用您需要的项目必须使用 this[o] 来调用它，就像引用数组时一样，如下所示，
for (var o in this)
{
console.log(this[o].shortcut);
if (this[o].shortcut == shortcut)
{
this[o].value = !this[o].value;
if (this[o].value)
{
this[o].texte.style("fontWeight","bold");
this[o].texte.style("color","green");
}
else
{
this[o].texte.style("fontWeight","normal");
this[o].texte.style("color","red");
}
addText("Toggled"+ this[o].name);
}
}
下面是一个工作片段，它不包含游戏或代码的所有功能，但包含上面解释的代码，如果您检查控制台，快捷方式值将打印在右侧
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="game">
</div>
<aside>
<p>
Spawn ball: <br/>
remove balls: <br/>
reset:<br />
</p>
<p id="options">
<span id="randomSpeed">Random velocity:<br /></span>
<span id="oneBall">Spawn one ball:<br /></span>
<span id="gravity">Gravity:<br /></span>
<span id="collision">Collision:<br /></span>
<span id="unstuck">Unstuck balls:<br /></span>
<span id="paintBackground">PaintMode:<br /></span>
<span id="wall">Walls:<br /></span>
<span id="blow">Mouse Blow:<br /></span>
<span id="attraction">Mouse attraction:<br /></span>
<span id="superAttraction">Super attraction:</span>
<br />
<br />
</p>
</aside>
<input type="text" onkeypress="keyPressed(event)">
<script>
var options =
{
Option: function(name, value, shortcut)
{
this.name = name;
this.value = value;
this.shortcut = shortcut;
},
toggle: function(shortcut)
{
for (var o in this)
{
console.log(this[o].shortcut);
if (this[o].shortcut == shortcut)
{
this[o].value = !this[o].value;
if (this[o].value)
{
this[o].texte.style("fontWeight","bold");
this[o].texte.style("color","green");
}
else
{
this[o].texte.style("fontWeight","normal");
this[o].texte.style("color","red");
}
addText("Toggled"+ this[o].name);
}
}
},
initiate: function()
{
this.randomSpeed = new this.Option("Random Speed", true,"R");
//this.randomSpeed.show();
this.oneBall = new this.Option("Spawn one ball", false,"O");
//this.oneBall.show();
this.gravity = new this.Option("gravity", false,"G");
//this.gravity.show();
this.collision = new this.Option("Collision", false,"C");
//this.collision.show();
this.paintBackground = new this.Option("Paint mode",false,"P");
//this.paintBackground.show();
this.wall = new this.Option("Wall Collision", false,"W");
//this.wall.show();
this.unstuck = new this.Option("Unstuck", false,"U");
//this.unstuck.show();
this.blow = new this.Option("Mouse blow", false,"B");
//this.blow.show();
this.attraction = new this.Option("Mouse Attraction", false,"A");
//this.attraction.show();
this.superAttraction = new this.Option("Super attraction", false,"A");
//this.superAttraction.show();
}
};
function keyPressed(e)
{
if (String.fromCharCode(e.which) == " ")
{
balls.splice(0,balls.length);
background(70,20,150);
addText("Reset");
}
else
{
console.log(""+String.fromCharCode(e.which))
options.toggle(String.fromCharCode(String.fromCharCode(e.which)));
}
}
options.initiate();
</script>
</body>
</html>关于javascript - 对于对象内的每个属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41587334/