问题
<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>
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.
The latest value of time is overriding into different element of array of object.
At the same time if we see the console then time would be different.
After long search, I could not solve this problem. Please guys help me to solve this problem.
回答1:
Here is a fixed solution http://jsfiddle.net/WacV4/1/. Object in JS are assigned by reference not by copying its values, so myObj in mymousemove always modifies the same value. You just need to copy vcan.main.currentTransform before extending.
回答2:
Just replace your extend function with this one
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");
}
}
回答3:
Somthing goes wrong in the extend function. Im not sure what the suggested out put should be but the returned object from this function always has the same time. perhaps you should return sobj instead?? it seams the loop is not doing what you want perhaps. I added a console.log(myObj); after its creation and this shows that the same time goes in to myObj everytime. If you want more help I suggest you add what your wished output could look like in the text.
Regards Pablo.
来源：https://stackoverflow.com/questions/12706360/why-the-latest-values-are-overriding-into-array-of-object-in-javascript