Как правильно клонировать объект на JS?

Question

[Максим Иванов]

Чтобы избегать коллапсов при передаче по ссылке, лучше клонировать объект, я так и делал раньше, использовал топорный метод

// для того, чтобы изменения объекта 
// через одную переменную не были видны
// в других переменных, необходимо
// клонировать объекты, а не передавать
// по ссылке

function clone(obj){
	if (typeof obj !== 'object') return null;
  
  var temp = {}; // временный объект
  
  for (var key in obj) {
    temp[key] = obj[key];
  }
  
  return temp;
}

var foo = { a: 1 };
var bar = clone("foo");
(bar.a)++;

document.body.innerHTML  =  foo.a +"<br>"; // 1
document.body.innerHTML +=  bar.a +"<br>"; // 2

Однако, при использовании с Angular познакомился с их способом angular.copy(), правда, когда нашел их реализацию, был удивлен, получается я всегда был не прав довольствуясь примитивом?

cloneObject: function(o){
            const gdcc = "__getDeepCircularCopy__";
            if (o !== Object(o)) {
                return o; // primitive value
            }

            var set = gdcc in o,
                cache = o[gdcc],
                result;
            if (set && typeof cache == "function") {
                return cache();
            }
            // else
            o[gdcc] = function() { return result; }; // overwrite
            if (o instanceof Array) {
                result = [];
                for (var i=0; i<o.length; i++) {
                    result[i] = this.cloneObject(o[i]);
                }
            } else {
                result = {};
                for (var prop in o)
                    if (prop != gdcc)
                        result[prop] = this.cloneObject(o[prop]);
                    else if (set)
                        result[prop] = this.cloneObject(cache);
            }
            if (set) {
                o[gdcc] = cache; // reset
            } else {
                delete o[gdcc]; // unset again
            }
            return result;
        },

https://github.com/angular/angular.js/issues/11099

stackoverflow.com/questions/10728412/in-javascript...

Есть ли статья о том, как правильно и производительно клонировать объекты?

Comments

[Денис]

В принципе, есть метод .assign(). Правда, как всегда, IE подкачал, но поможет полифилл, который найдёте по ссылке выше.

Answer 1

[xfg]

Ну у вас просто не глубокое копирование. А реализация от ангуляра делает глубокое копирование (deep copy). Вот и всё. А вообще юзайте lodash там уже всё есть.

Answer 2

[Виталий]

https://developer.mozilla.org/ru/docs/Web/JavaScri... включая полифил

Answer 3

[Бектур Муратов]

Вот Вам собственная реализация глубокого копирования

const DeepClone = (obj) => {
        let newObj = { ...obj };

        for (let prop in obj) {
          if (
            typeof obj[prop] === "object" ||
            typeof obj[prop] === "function"
          ) {
            newObj[prop] = DeepClone(obj[prop]);
          }
        }

        return newObj;
      };