Javascript：数组中的对象具有未定义的变量？

打扰标题我不知道如何简洁地陈述我想要做的事情。我试图从书籍以及互联网的片段中教自己的JavaScript。我的第一个测试脚本试图创建一个对象数组（星号），并使用for循环来读取这些对象中的数据，以便将对象中存储的点绘制到画布上。Javascript：数组中的对象具有未定义的变量？

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 

/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript"> 
     var star = {} 
     function the_stars() {} 
     the_stars.prototype = { 
     constellation: "test", 
     x: 120, 
     y: 120 
     }; 
     function the_stars.set(c,xx,yy) { alert("called"); constellation=c; x=xx; y=yy; }; 
     star["Polaris"] = new the_stars(); 
     star["Polaris"].set("Ursa Minor",250,20); 
     alert(star["Polaris"].constellation); 
     star["Mizar"] = new the_stars(); 
     star["Mizar"].set("Ursa Major",50,75); 
     star["Alderbaran"] = new the_stars(); 
     star["Alderbaran"].set("Taurus",300,150); 
     star["Rigel"] = new the_stars(); 
     star["Rigel"].set("Orion",350,370); 
     function make() 
     { 
     alert("in make"); 
     var context = document.getElementById('c').getContext('2d'); 
     context.fillStyle = 'white'; 
     context.strokeStyle = 'white'; 
     for(var thestar in star) 
     { 
      alert("in for loop "+thestar+thestar.x+thestar.y); 
      context.arc(thestar.x,thestar.y,40,0,2*Math.PI); 
      context.stroke(); 
     } 
     } 
    </script> 
    <style type="text/css"> 
     #c { 
      background-color:#000000; 
      width:450px; 
      height:450px; 
     } 
    </style> 
    </head> 
    <body onLoad='make()'> 
    <h1>stars</h1> 
    <canvas id='c'> 
    </canvas> 
    </body> 
</html>

警报在for循环给我的明星的正确名称，但告诉我，x和y是不确定的。但这怎么可能alert(star["Polaris"].constellation);打印“测试”，所以功能设置不起作用，但默认值设置，但alert("in for loop "+thestar+thestar.x+thestar.y);打印“undefinedundefined。这是怎么可能的？

来源

2014-01-06 jason dancks

'函数the_stars.set'是什么？ –

因为你设置变量start []的方式不是数组。这是一个对象。数组只能通过数字索引访问。在这种情况下，for循环的运行时间将超过您设置的索引数量。查看链接http://stackoverflow.com/questions/9526860/why-does-a-string-index-in-a-javascript-array-not-increase-the-length-size了解更多详情。 – jsjunkie

你有2个错误而不是做的：。

function the_stars.set(c,xx,yy) { 
    alert("called"); 
    constellation=c; x=xx; y=yy; 
};

你应该这样做：

the_stars.prototype.set = function(c,xx,yy) { 
    alert("called"); 
    this.constellation=c; this.x=xx; this.y=yy; 
};

这是定义在JS成员方法的方式。

然后，在你的for循环，而不是这样的：

for(var thestar in star) 
    { 
     alert("in for loop "+thestar+thestar.x+thestar.y); 
     ... 
    }

你应该有这样的：

for(var key in star) //Note the key here 
    { 
     var thestar = star[key]; //This way you get the item 
     alert("in for loop "+thestar+thestar.x+thestar.y); 
     ... 
    }

这是因为for...in循环获取的关键，而不是作为foreach实际元素在其他语言中使用。

在这里，你有工作：http://jsfiddle.net/edgarinvillegas/CwVGv/

欢呼声中，来自拉巴斯，玻利维亚

来源

2014-01-06 05:33:37

感谢您的帮助。为什么这些圈子看起来像素化，就好像它扩大了一样？为什么有线被绘制？ –

其实问题是存在如何访问。循环thestar仅仅是一个关键的不是对象在所有所以它是给错误您需要通过星级[thestart]进入这样说，这

 for(var thestar in star) 
    { 
     alert("in for loop "+thestar+star[thestar].x+star[thestar].y); 
     context.arc(star[thestar].x,star[thestar].y,40,0,2*Math.PI); 
     context.stroke(); 
    }

来源

2014-01-06 05:32:17

看到这里的工作版本：

<script type="text/javascript"> 
    var star = {} 
    function the_stars() {} 
    the_stars.prototype = { 
    constellation: "test", 
    x: 120, 
    y: 120, 
    set: function(c,xx,yy){ 
     alert("called"); this.constellation=c; this.x=xx; this.y=yy; 
    } 
    }; 

    star["Polaris"] = new the_stars(); 
    star["Polaris"].set("Ursa Minor",250,20); 
    alert(star["Polaris"].constellation); 
    star["Mizar"] = new the_stars(); 
    star["Mizar"].set("Ursa Major",50,75); 
    star["Alderbaran"] = new the_stars(); 
    star["Alderbaran"].set("Taurus",300,150); 
    star["Rigel"] = new the_stars(); 
    star["Rigel"].set("Orion",350,370); 

    console.log(star); 
    function make() 
    { 
    alert("in make"); 
    var context = document.getElementById('c').getContext('2d'); 
    context.fillStyle = 'white'; 
    context.strokeStyle = 'white'; 
    for(var thestar in star) 
    { 
     alert("in for loop "+thestar+star[thestar].x+star[thestar].y); 
     //console.log(star[thestar]); 
     //console.log("in for loop "+thestar+star.x+star.y); 

     context.arc(star[thestar].x,star[thestar].y,40,0,2*Math.PI); 
     context.stroke(); 
    } 
    } 
</script>

来源

2014-01-06 05:36:56

Javascript：数组中的对象具有未定义的变量？

回答

相关问题