[javascript] 자바 스크립트에서 딥 클론하는 방법

복제하려는 항목에 따라 다릅니다. 이것은 진정한 JSON 객체입니까 아니면 JavaScript의 객체입니까? 복제를 수행하려면 문제가 발생할 수 있습니다. 어떤 문제? 아래에서 설명하겠습니다. 먼저 객체 리터럴, 프리미티브, 배열 및 DOM 노드를 복제하는 코드 예제입니다.

function clone(item) {
    if (!item) { return item; } // null, undefined values check

    var types = [ Number, String, Boolean ],
        result;

    // normalizing primitives if someone did new String('aaa'), or new Number('444');
    types.forEach(function(type) {
        if (item instanceof type) {
            result = type( item );
        }
    });

    if (typeof result == "undefined") {
        if (Object.prototype.toString.call( item ) === "[object Array]") {
            result = [];
            item.forEach(function(child, index, array) {
                result[index] = clone( child );
            });
        } else if (typeof item == "object") {
            // testing that this is DOM
            if (item.nodeType && typeof item.cloneNode == "function") {
                result = item.cloneNode( true );
            } else if (!item.prototype) { // check that this is a literal
                if (item instanceof Date) {
                    result = new Date(item);
                } else {
                    // it is an object literal
                    result = {};
                    for (var i in item) {
                        result[i] = clone( item[i] );
                    }
                }
            } else {
                // depending what you would like here,
                // just keep the reference, or create new object
                if (false && item.constructor) {
                    // would not advice to do that, reason? Read below
                    result = new item.constructor();
                } else {
                    result = item;
                }
            }
        } else {
            result = item;
        }
    }

    return result;
}

var copy = clone({
    one : {
        'one-one' : new String("hello"),
        'one-two' : [
            "one", "two", true, "four"
        ]
    },
    two : document.createElement("div"),
    three : [
        {
            name : "three-one",
            number : new Number("100"),
            obj : new function() {
                this.name = "Object test";
            }
        }
    ]
})

이제 REAL 개체 복제를 시작할 때 발생할 수있는 문제에 대해 이야기하겠습니다. 나는 지금 당신이 다음과 같은 것을함으로써 창조하는 물체에 대해 이야기하고 있습니다.

var User = function(){}
var newuser = new User();

물론 그것들을 복제 할 수 있습니다. 그것은 문제가되지 않습니다. 모든 객체는 생성자 속성을 노출하고 객체를 복제하는 데 사용할 수 있지만 항상 작동하지는 않습니다. for in이 개체에 대해 간단하게 할 수도 있지만 같은 방향으로 진행됩니다-문제. 또한 코드 내에 복제 기능을 포함 시켰지만 if( false )문에 의해 제외되었습니다 .

그렇다면 복제가 왜 고통 스러울 수 있습니까? 우선 모든 객체 / 인스턴스에는 상태가있을 수 있습니다. 예를 들어 객체에 개인 변수가 없는지 확신 할 수 없으며,이 경우 객체를 복제하면 상태가 깨집니다.

상태가 없다고 상상해보세요. 괜찮습니다. 그렇다면 여전히 또 다른 문제가 있습니다. “생성자”방법을 통한 복제는 또 다른 장애물을 제공합니다. 인수 종속성입니다. 이 개체를 만든 사람이 어떤 종류의

new User({
   bike : someBikeInstance
});

이 경우 운이 좋지 않은 경우 someBikeInstance가 일부 컨텍스트에서 생성되었을 수 있으며 해당 컨텍스트는 복제 메서드에 대해 알 수 없습니다.

그래서 뭘 할건데? 당신은 여전히 for in솔루션을 할 수 있고 그러한 객체를 일반 객체 리터럴처럼 취급 할 수 있지만, 그러한 객체를 전혀 복제하지 않고 단지이 객체의 참조를 전달하는 것이 아이디어일까요?

또 다른 해결책은 복제해야하는 모든 객체가이 부분을 스스로 구현하고 적절한 API 메서드 (예 : cloneObject)를 제공해야한다는 규칙을 설정할 수 있다는 것입니다. 무엇 뭔가 cloneNodeDOM에 대해하고있다.

당신이 결정합니다.

답변

var cloned = JSON.parse(JSON.stringify(objectToClone));

function copy(aObject) {
  if (!aObject) {
    return aObject;
  }

  let v;
  let bObject = Array.isArray(aObject) ? [] : {};
  for (const k in aObject) {
    v = aObject[k];
    bObject[k] = (typeof v === "object") ? copy(v) : v;
  }

  return bObject;
}

function deepClone(obj, hash = new WeakMap()) {
    if (Object(obj) !== obj) return obj; // primitives
    if (hash.has(obj)) return hash.get(obj); // cyclic reference
    const result = obj instanceof Set ? new Set(obj) // See note about this!
                 : obj instanceof Map ? new Map(Array.from(obj, ([key, val]) =>
                                        [key, deepClone(val, hash)]))
                 : obj instanceof Date ? new Date(obj)
                 : obj instanceof RegExp ? new RegExp(obj.source, obj.flags)
                 // ... add here any specific treatment for other classes ...
                 // and finally a catch-all:
                 : obj.constructor ? new obj.constructor()
                 : Object.create(null);
    hash.set(obj, result);
    return Object.assign(result, ...Object.keys(obj).map(
        key => ({ [key]: deepClone(obj[key], hash) }) ));
}

// Sample data
var p = {
  data: 1,
  children: [{
    data: 2,
    parent: null
  }]
};
p.children[0].parent = p;

var q = deepClone(p);

console.log(q.children[0].parent.data); // 1

snapshot: function(obj) {
  if(obj == null || typeof(obj) != 'object') {
    return obj;
  }

  var temp = new obj.constructor();

  for(var key in obj) {
    if (obj.hasOwnProperty(key)) {
      temp[key] = _.snapshot(obj[key]);
    }
  }

  return temp;
}

_.snapshot(object);

function deepClone (obj) {
    var _out = new obj.constructor;

    var getType = function (n) {
        return Object.prototype.toString.call(n).slice(8, -1);
    }

    for (var _key in obj) {
        if (obj.hasOwnProperty(_key)) {
            _out[_key] = getType(obj[_key]) === 'Object' || getType(obj[_key]) === 'Array' ? deepClone(obj[_key]) : obj[_key];
        }
    }
    return _out;
}

return dta.concat(clone(dta),clone(dta),clone(dta),clone(dta));

function clone(obj,sel) {
    return (obj ? _clone("",obj,sel) : obj);
    }

function _clone(pth,src,sel) {
    var ret=(src instanceof Array ? [] : {});

    for(var key in src) {
        if(!src.hasOwnProperty(key)) { continue; }

        var val=src[key], sub;

        if(sel) {
            sub+=pth+"/"+key;
            if(!sel(sub,key,val)) { continue; }
            }

        if(val && typeof(val)=='object') {
            if     (val instanceof Boolean) { val=Boolean(val);        }
            else if(val instanceof Number ) { val=Number (val);        }
            else if(val instanceof String ) { val=String (val);        }
            else                            { val=_clone(sub,val,sel); }
            }
        ret[key]=val;
        }
    return ret;
    }

function clone(src) {
    var ret=(src instanceof Array ? [] : {});
    for(var key in src) {
        if(!src.hasOwnProperty(key)) { continue; }
        var val=src[key];
        if(val && typeof(val)=='object') { val=clone(val);  }
        ret[key]=val;
        }
    return ret;
    }