title: why the latest values are overriding into array of object in javascript?
body: <pre><code>&lt;html&gt;
      &lt;head&gt;
  
  
          &lt;style type="text/css"&gt;
              #mycanvas{
                  width:500px;
                  height:450px;
                  border:2px solid green;
  
                  font-size:30px;
              }
          &lt;/style&gt;
  
          &lt;script&gt;
              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') &amp;&amp; (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&lt; vcan.main.repNode.length; i++){
                          output +=   vcan.main.repNode[i].mdTime;    
                          output += "&lt;br /&gt;";
  
                      }
  
                      document.getElementById("result").innerHTML = output;
  
                  }
  
              }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="mycanvas"&gt;
              Please move the mouse inside this box
              And click on Show Result
          &lt;/div&gt;
  
          &lt;button id="test"&gt;
              Show Result
          &lt;/button&gt;
  
          &lt;div id="result"&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>For solve problem please render these above code into browser. After click on Show Result button there would be shown time. My question is that why all the same time are displaying.</p>
  
  <p>The latest value of time is overriding into different element of array of object.</p>
  
  <p>At the same time if we see the console then time would be different.</p>
  
  <p>After long search, I could not solve this problem. Please guys help me to solve this problem.</p>