1

О глубоком копировании объектов в JavaScript обсуждений довольно много, и на англоязычном StackOverflow предлагается множество вариантов решений. У меня даже есть свой собственный.

Но перед тем, как браться за эту задачу снова, я хотел бы задаться вопросом - а возможно ли в принципе автономно клонировать произвольный объект? Многие решения (в том числе последняя версия моего) не учитывают:

  • Свойства со значениями типа "функция"
  • Геттеры и сеттеры
  • Неперечисляемые свойства
  • Map-ы и Set-ы (не говоря уж о WeakMap и WeakSet)

Я знаю, что это сообщение читают не только профессионалы, но и новички, не понимающие глубины проблемы, а оттого может возникнуть соблазн ответить что-то вроде: "Ха! Да всё ж элементарно! const clone = { ...original } - и всё!!!". Но если бы всё было так просто, я бы не задавал этот вопрос на седьмом году в веб-разработке, а потому разберём и отсеем популярные ложные решения.

Но сначала уточним определения. Глубокое копирование объекта подразумевает, что изменение любых свойств клонированного объекта, включая свойства всех его дочерних объектов, никак не повлияет на исходный экземпляр, при этом клонированный объект полностью идентичен исходному экземпляру, включая функции-свойства, неперичисляемые свойства и так далее.

Разбор и отсев неверных решений

Сериализация с последующей десериализацией

В этом методе мы сначала сериализуем объект с помощью JSON.stringify(original), а потом десериализуем его с помощью JSON.parse. В одну строчку это будет так:

JSON.parse(JSON.stringify(original))

Попробуем клонировать нижеследующий объект original:

const original = {
    alpha: "FOO",
  bravo: () => { return "BAR" }
}

const clone = JSON.parse(JSON.stringify(original));

Но если мы это выведем это в консоль, то свойство bravo будет утрачено. Дальше этот метод нам уже неинтересен.

Object.assign и Spread Operator

Синтаксис вида

const clone = { ...original }

или

const clone = Object.assign({}, original )

глубокого клонирования не делает - по сути это замена одного контейнера на другой, а содержимое ссылается на ту же область памяти, что и в исходном объекте.

const original = {
    alpha: "FOO",
  bravo: {
    charlie: "BAR"
  }
}

const clone = { ...original };
clone.bravo.charlie = "HOGE";

console.log(original.bravo.charlie); // "HOGE"!!! Какого ... ?!

Тоже самое и насчёт частного случая объекта - массива:

const clone = [ ...original ];

Ну а копировать каждый дочерний объект по отдельности, как это Дан Абрамов предлагал в своём Redux-е - это какая-то дикость для третьего десятилетия 21-го века - о каких нанотехнологиях, робототехнике и терраформировании Марса можно говорить, когда мне предлагают заниматься такой рутинной работой? Вот так вот эта рутинная ерунда выглядела:

function updateVeryNestedField(state, action) {
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        [action.someId]: {
          ...state.first.second[action.someId],
          fourth: action.someValue
        }
      }
    }
  }
}

Проблемы с глубоким копированием произвольных объектов

Копирование функций

Во-первых, непонятно что вообще подразумевает глубокое клонирование функции. Технически, наверное, это означает декларирование той же функции, что и уже существующая, но в другой области памяти. Но возможно, я что-то не учитываю.

Я начинал карьеру сразу с синтаксиса ES6, поэтому не застал тех времён, когда программисты забивали гвозди тапками, используя функции в качестве классов. Если подобные фокусы в расчёт не брать, то

function original() {

}

const clone = original;

хотя и не будет глубоким копированием, но может ли оно причинить какие-либо проблемы?

На англоязычном StackOverflow нашел такое решение:

const newFunc = oldFunc.bind({}); 

Если такое решение не вызовет никаких сторонних эффектов, то возьму его на заметку.

Так или иначе, здесь мы говорим о глубоком клонировании объектов, в частности свойств-функций (методов). Там внутри методов может быть ещё и this, и нужно чтобы при глубоком копировании ссылка была на this клона.

Копирование геттеров и сеттеров

При переборе через Object.entries(original) (как в моём выше приведённом решении) и для геттеров, и для сеттеров значениями будут те значения, которые эти геттеры и сеттеры возвращают (а поскольку сеттеры по своей природе ничего не возвращают, то это будет undefined):

const original = {
  alpha: "FOO",
  get charle() {
    return this.alpha + "__" + "BAR";
  },
  set delta(value) {
    this.alpha = value;
  }
}

for (const [key, value] of Object.entries(original)) {
  console.log(key);
  console.log(value);
}

Значением свойства charle здесь будет строка FOO__BAR.

alpha
FOO
charle
FOO__BAR
delta
undefined

Не получится и так (будет тот же результат):

for (const key of Object.keys(original)) {
  // ...
}

Неперичисляемые свойства

Сказать по правде, за весь свой опыт мне почти никогда не приходилось итерировать неперичисляемые свойства. Но в принципе, узнать о существовании неперичислямых свойств мы можем *(например, через Object.getOwnPropertyNames(object1)) и тем более обратиться к ним, а потому дальше - все проблемы, что и выше.

Map-ы и Set-ы

Map не может быть конвертирована в JSON, и возможно это вызовет проблемы (не уверен, что предложенное ранее мной решение может быть доработано путём улучшения; возможно придётся в корне сменить подход).

Возможно, эти коллекции будут нуждаться в отдельной обработке путём создания нового контейнера такого же типа. Но ведь со временем в ES6 будут добавляться новые контейнеры, и тогда придётся вносить изменения в реализацию

Итоговый вопрос

А вопрос такой: все приведённые выше проблемы с глубоким клонированием производных объектов плюс те, которые я не назвал - в принципе преодолимы? Это можно учесть при создании функции глубокого копирования? Или реалистично автономно копировать лишь объекты, включающие в себя только те типы данных, которые могут быть сериализованы в JSON (number, string, boolean, null, Array, object)?

1

1 ответ 1

1

Создать полностью независимый объект в общем случае невозможно.

Из нового - приватные свойства, которые никак нельзя ни прочитать, ни перенести:

class Smth {
  get #x() { return Math.random() }
  get x() { return this.#x }
}

var obj = new Smth()

console.log(obj.x)
console.log(obj.x)
console.log(obj.x)

Из старого - все замыкания:

var obj = (function () {
  var x = 0
  
  return {
    doSmth() {
      return ++x
    }
  }
})()

console.log(obj.doSmth())
console.log(obj.doSmth())
console.log(obj.doSmth())

И никакие копирования прототипов, getter'ов привязывания функций и всё остальное не поможет.

8
  • 1
    Также из старого - в общем случае нельзя создать копию exotic object. 1 мар 2022 в 10:35
  • также с клонированием html-элементов и обработчиков событий тоже не все очевидно
    – Grundy
    1 мар 2022 в 10:45
  • @PavelMayorov, так exotic object можно определять и создавать аналогичный?
    – Qwertiy
    1 мар 2022 в 10:53
  • @Grundy, dom-элементы клонироваться умеют. С событиями - да, вроде проблемы.
    – Qwertiy
    1 мар 2022 в 10:54
  • @Qwertiy, без событий - не будет полное копирование :-) ну и для канваса вообще беда, похоже, потому что нарисованное не копируется
    – Grundy
    1 мар 2022 в 10:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.