Question

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

要解决问题，请将以上代码渲染到浏览器中。单击“显示结果”按钮后，将显示时间。我的问题是为什么所有的同时都在显示。

最新的时间值覆盖了对象数组的不同元素。

同时，如果我们看到控制台，那么时间会有所不同。

经过长时间的搜索，我无法解决这个问题。请大家帮我解决这个问题。

Answer 1

这是一个固定的解决方案http://jsfiddle.net/WacV4/1/。 JS中的对象是通过引用而不是通过复制其值来分配的，因此myObj中的mymousemove始终会修改相同的值。您只需要在扩展之前复制vcan.main.currentTransform。

Answer 2

只需用这个替换你的扩展功能

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");
  }
}

Answer 3

扩展功能出错了。我不确定建议的输出应该是什么，但此函数返回的对象始终具有相同的时间。也许你应该返回sobj而不是？它接缝循环并不是你想要的。我在创建后添加了console.log(myObj);，这表明每次都在同一时间进入myObj。如果您需要更多帮助，我建议您在文本中添加您希望的输出结果。

关心巴勃罗。

为什么最新的值会覆盖到javascript中的对象数组？

3 个答案: