Question

原谅标题我不知道如何简明扼要地陈述我要做的事情。我正在尝试从书籍和互联网的片段中自学javascript。我的第一个测试脚本是尝试创建一个对象数组（星号），并使用for循环读取这些对象中的数据，以便在存储在对象中的点处将圆圈绘制到画布上。

代码：

<!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);打印“test”时，这怎么可能呢，所以函数集不起作用但默认值已设置但alert("in for loop "+thestar+thestar.x+thestar.y);打印“undefinedundefined。这怎么可能？

Answer 1

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

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

Answer 2

实际上，如何访问for循环存在问题。 thestar只是一个关键，而不是一个对象。所以这是错误的。您需要通过star [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();
     }

Answer 3

请参阅此处的工作版本：

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

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

3 个答案: