Объекты push () редактируются в Array

Question

Я хочу понять следующее поведение при перемещении объектов в массив.

(1) Я создаю объект, создаю свойство объекта и затем помещаю его в массив.

var array = [];
var obj = {};

obj.x = 1;
array.push(obj); 
console.log(array); //Output [{x: 1}]

Рассмотрим две альтернативы:

(2a): я изменяю свойство объекта и изменяю объект, указанный в массиве:

obj.x = 2;
console.log(array); //Output [{x: 2}] ... it has been changed

(2b вместо2a ) Я делаю ссылку на объект на новый объект и создаю свойство, исходный объект, на который ссылается массив, не изменяется:

obj = {}; //Change reference to new object
obj.x = 2;
console.log(array); //Output [{x: 1}] ... it is unchanged

Почему это так?

PS: Я заметил, что это различие обсуждается здесь ( Объекты помещаются в массив в javascript глубокой или неглубокой копии? ), но это не объясняется удовлетворительно.

Answer 1

1. Когда вы нажимаете объект, вы добавляете ссылку на первый объект, поэтому он обновляется до 2

2. Вы создаете новый объект и присваиваете емуobj и изменение этого объекта не изменит значение массива, потому что оно указывает на другую ссылку.

Answer 2

Я не знаю, помогут ли мои плохие ASCII навыки построения диаграмм, но вот попытка:

-----------------------------------------
(1)
-----------------------------------------

array = []

  [ ]    'array'
   ^--------/

obj = {}

  [ ]    'array'   { }     'obj'
   ^--------/       ^-------/

obj.x = 1

  [ ]    'array'   {x: 1}    'obj'
   ^--------/        ^---------/

array.push(obj)

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'
   ^------------/        ^---------/

-----------------------------------------
(2a)
-----------------------------------------

obj.x = 2

       ,-----------------v
  [0: * ]    'array'   {x: 2}    'obj'
   ^------------/        ^---------/


-----------------------------------------
(2b)
-----------------------------------------

obj = {}

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'    { }
   ^------------/                  `-------^ 


obj.x = 2

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'    {x: 2}
   ^------------/                  `--------^ 

Answer 3

Объекты JavaScript помещаются в массив по ссылке на объект, то есть если вы помещаете объект в массив, а затем манипулируете объектом, содержимое массива также меняется, поскольку массив ссылается на тот же объект.

Создавая новый объект либо путем инициализации, либо путем клонирования побочных действий, вы получите два совершенно разных объекта в массиве.

Подумайте об этом так: когда вы вызываете push onобъект, сам объект не входит в массив, ссылка (указатель) на объект делает.Примитивные типы, такие как числа, копируются , объекты - нет.