JavaScript 객체의 심층 복제 소개_javascript 기술

프런트 엔드 서클에 객체 심층 복제라는 새로운 단어가 언제 등장하기 시작했는지 모르겠습니다. 매우 고상해 보일 수도 있지만 실제로는 새로운 것이 아닙니다. 실제 프로젝트 개발에서 이미 사용했을 수도 있습니다. 그러나 광범위하고 심오한 한자로 인해 원래 간단한 것 중 일부는 전문적인 용어로 인해 약간 모호해집니다. . 장식을 추가하면 신비로워집니다.

애초에 객체를 딥 클론하는 이유는 무엇인가요? 추측을 해볼 수 있게 해주세요. js에 내장된 객체 문서가 너무 길다고 생각하는 경우가 있을 수 있습니다. 그러면 다음과 같이 할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var d = 문서;
d.by = 함수(id){
d.getElementById(id)를 반환합니다.
};
d.by('id').innerHTML = 'hello sentsin';

위 코드는 document.getElementById를 단순화하고, 원본 문서 개체에 by 멤버 메서드도 추가합니다. document.hasOwnProperty('by')에서 반환된 상태 값을 통해 판단을 확인할 수 있습니다. 다음 예를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

var person = {이름: 'Xianxin', 직업: '프론트엔드 개발', 장소: '항저우'};
var newPerson = 사람;
newPerson.age = '24';
console.log(사람);
//결과: {이름: 'Xianxin', 직업: '프론트엔드 개발', 장소: '항저우', 나이: 24}

객체가 단순히 새 변수에 전달되면 객체에 별칭만 추가되는 것을 볼 수 있습니다. 즉, 별칭을 조작하면 원래 개체 키 값이 변경됩니다. 하지만 문제는 때때로 newPerson이 person과 완전히 독립되기를 원하고 이들 사이에 동기화 관계가 없기 때문에 복사본을 생성해야 한다는 것입니다. 다음 예를 참조하세요.

코드 복사 코드는 다음과 같습니다.

var cloneObj = 함수(obj){
var str, newobj = obj.constructor === 배열 ? [] : {};
If(typeof obj !== '객체'){
         반품;
} else if(window.JSON){
         str = JSON.stringify(obj), //직렬화된 객체
​​​​ newobj = JSON.parse(str); //복원
} 그 밖의 {
for(obj의 var i){
newobj[i] = obj[i] 유형 === '객체'
cloneObj(obj[i]) : obj[i]
}
}
newobj 반환;
};

//테스트
var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//딥 클로닝 수행
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//복제 후 새 개체의 구성원 삭제
newobj.a 삭제;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//결과: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];

이를 객체 복제라고 합니다. 그러나 설명이 필요한 몇 가지 사항이 있습니다. 코드의 JSON 개체와 해당 멤버 메서드 stringify 및 구문 분석은 각각 개체(배열 개체 포함)를 문자열로 변환하고 복원하여 개체의 전체 복사본을 구현하는 역할을 담당합니다. 따라서 IE와 같은 저수준 브라우저의 경우 배열을 복사하면 newobj.concat(obj)를 사용할 수 있고, 일반 객체의 경우 간단히 열거하고 값을 할당할 수 있습니다.