爲什麼最新值覆蓋到JavaScript中的對象數組？

<html> 
    <head> 


     <style type="text/css"> 
      #mycanvas{ 
       width:500px; 
       height:450px; 
       border:2px solid green; 

       font-size:30px; 
      } 
     </style> 

     <script> 
      window.onload = function(){ 
       vcan = {}; 
       vcan.main = {} 
       vcan.main.repNode = []; 
       vcan.main.currentTransform = {'id':0, 'name':'myobj'} 

       document.getElementById("mycanvas").addEventListener('mousemove', mymousemove); 

       function mymousemove(){ 
        var currAdTime = new Date().getTime(); 
        console.log(currAdTime); 
        var myObj = extend(vcan.main.currentTransform , {mdTime:currAdTime, func:'add'}) 
        vcan.main.repNode.push(myObj); 
       } 

       function extend (fobj, sobj){ 
        if((typeof fobj == 'object') && (typeof sobj == 'object')){ 
        for(var prop in sobj){ 
         fobj[prop] = sobj[prop]; 
        } 
         return fobj; 
        }else{ 
         alert("it seems that the arguments you passed are not object"); 
        } 
       } 

       document.getElementById("test").onclick = function(){ 

        var output = ""; 
        for(var i=0; i< vcan.main.repNode.length; i++){ 
         output += vcan.main.repNode[i].mdTime;  
         output += "<br />"; 

        } 

        document.getElementById("result").innerHTML = output; 

       } 

      } 
     </script> 
    </head> 

    <body> 
     <div id="mycanvas"> 
      Please move the mouse inside this box 
      And click on Show Result 
     </div> 

     <button id="test"> 
      Show Result 
     </button> 

     <div id="result"> 

     </div> 
    </body> 

</html>

爲了解決問題，請將上述代碼渲染到瀏覽器中。點擊Show Result按鈕後，會顯示時間。我的問題是，爲什麼所有的同時顯示。爲什麼最新值覆蓋到JavaScript中的對象數組？

時間的最新值覆蓋對象數組的不同元素。

同時，如果我們看到控制檯，那麼時間會有所不同。

經過漫長的搜索，我無法解決這個問題。請大家幫我解決這個問題。

來源

2012-10-03 Suman Bogati

擺弄：[http://jsfiddle.net/WacV4/](http://jsfiddle.net/WacV4/） – RobMasters

這裏是一個固定的解決方案http://jsfiddle.net/WacV4/1/。 JS中的對象通過引用進行分配，而不是通過複製其值，因此myObj中的mymousemove總是修改相同的值。在擴展之前，您只需複製vcan.main.currentTransform。

來源

2012-10-03 10:34:23 bjornd

感謝您解決此問題。我很欣賞它，但是我有一個問題，如果程序有很多對象，會不會影響性能。因爲複製到所有對象的屬性是昂貴的程序。你說的話？ –

正如我在本例中看到的對象只有幾個鍵，所以在這種情況下，性能不是你應該考慮的。 – bjornd

只是這一個

function extend(fobj, sobj) { 
    if ((typeof fobj == 'object') && (typeof sobj == 'object')) { 
    var newfobj = Object(); 
    for (var prop in fobj) { 
     newfobj[prop] = fobj[prop]; 
    } 
    for (var prop in sobj) { 
     newfobj[prop] = sobj[prop]; 
    } 
    return newfobj; 
    } else { 
    alert("it seems that the arguments you passed are not object"); 
    } 
}

來源

2012-10-03 10:37:47 Amir

可以使用'{}'來代替'Object（）' – bjornd

謝謝埃米爾，你看過我對bjornd發表的評論嗎？請閱讀。 –

這取決於您的程序目的。在這段代碼中，並沒有考慮寫整個程序，如果我是你，我會創建一個新的對象而不是調用extend。但如果你提到你的計劃目標，我們可以幫助更多的性能。 – Amir

財產以後更換您的擴展功能出錯的擴展功能。我不知道建議的輸出應該是什麼，但從這個函數返回的對象總是有相同的時間。也許你應該返回sobj呢？它接縫循環沒有做你想要的。創建後我添加了一個console.log(myObj);，這表明每次同時進入myObj。如果您需要更多幫助，我建議您在文本中添加希望的輸出內容。

關於帕布羅。

來源

2012-10-03 10:38:51

爲什麼最新值覆蓋到JavaScript中的對象數組？

回答

相關問題