Иногда в JavaScript возникает задача по клонированию какого-то объекта. И в этот момент не всегда ясно как это правильно нужно делать.
Решение
У нас есть объект, который мы хотим клонировать. То есть мы хотим взять все свойства этого объекта и перенести их в новый объект.
let obj22 = {s:123, z:456}
Теперь нам нужно создать новый идентификатор привязки и присвоить ему результат выражения литерального объявления объекта и оператора троеточия.
let obj33 = {...obj22}
С этого момента в оперативной памяти живут уже два объекта и две ссылки на них. Клонирование прошло успешно.
Проверка клонирования
Давайте изменим их свойства и проверим, что всё правильно склонировалось.
obj22.x = 111
obj33.r = 777
Оригинальный объект хранит свои свойства, а клонированный объект свои. Добавление новых свойств произошло только для каждого из объектов.
Теперь можем изменить свойство, которое клонировали и ещё раз убедиться, что всё ок.
obj22.s = 0
Проблемы, которые возникают при неправильном клонировании
Если пытаться присвоить новому идентификатору привязки, какой-нибудь существующий идентификатор привязки, то мы просто получаем ссылку на один и тот же объект, а не клонируем новый.
Пример проблемы:
let ob1 = {a:"a", b:"b"}; let ob2 = ob1;
В таком виде ob2 будет ссылаться на тот же самый объект что и ob1. Оба идентификатора привязки ссылаются на один и тот же объект.
Это значит, что при изменении свойства от какого-либо идентификатора привязки мы будем менять оригинальный объект.
Если мы у любого идентификатора поменяем значение у свойства A, то изменения отразятся на другом идентификаторе, так как они оба ссылаются на один и тот же объект.
ob1.a = 100
В этом и кроется проблема при неправильном клонировании объектов. В этом случае для одного объекта создаются две ссылки. Изменяя в одном идентификаторе, мы меняем свойства и у другого.
Способ № 2 - Через конструктор Object и его свойство assign
Функция assign используется для копирования значений всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект.
Пример использования. У нас есть оригинальный объект:
let obj44 = {44:44, 55:55};
В новую переменную obj700 положим результат вызова метода assign()
let obj700 = Object.assign({}, obj44);
Первым параметром у нас будет новый объект, объявленный литерально. Вторым параметром мы передаём тот объект, свойства которого хотим скопировать.
В результате мы получаем новый клон оригинального объекта.
Информационные ссылки
Стандарт ECMAScript - Раздел "Производство ObjectLiteral" - https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#prod-ObjectLiteral
