在JavaScript中推送对象无法正常工作

Question

JavaScript的:

var songs = {};
var song = {};
var row = 0;
$('button').on('click', function(){
  row++
  song['name'] = 'hey' + row;
  songs['row' + row] = song;
  console.log(songs);
});

每当我点击按钮时,它应该创建一个新的['name']并将其推送到对象'songs'.点击5次后,我希望对象看起来像这样:

{   "row1": {
        "name": "hey1"
    },
    "row2": {
        "name": "hey2"
    },
    "row3": {
        "name": "hey3"
    },
    "row4": {
        "name": "hey4"
    }
    "row5": {
        "name": "hey5"
    }
}

但它看起来像这样

{   "row1": {
        "name": "hey5"
    },
    "row2": {
        "name": "hey5"
    },
    "row3": {
        "name": "hey5"
    },
    "row4": {
        "name": "hey5"
    }
    "row5": {
        "name": "hey5"
    }
}

我认为这与某些事情有关

songs['row' + row] = song;

https://jsfiddle.net/yhk81zbu/3/

为什么这不起作用,我该如何解决？

Answer 1

你只有一个歌曲对象的实例,它在row1,row2,row3等中被共享.每次你写的时候你song['name'] = 'hey' + row;都在修改一个歌曲对象的'name'字段,它记住了所有的行共享.你必须确保每次都创建一个新的歌曲对象,而不是song['name'] = 'hey' + row;你可以写var song = {'name' : 'hey' + row };,每个行都有自己的歌曲对象,而不是共享一个.

var songs = {}
var row = 0;
$('button').on('click', function(){
  row++
  var song = {'name' : 'hey' + row };
  songs['row' + row] = song;
  console.log(songs);
});