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：數組中的對象具有未定義的變量？

回答

相關問題