언제 시작되었는지는 모르겠지만 프론트 엔드 원에는 새로운 단어가 나타났습니다 : 물체 깊이 클로닝. 키가 크지 만 실제로는 새로운 것이 아닙니다. 당신은 우리의 실제 프로젝트 개발에 그것을 사용했을지 모르지만, 중국어의 심오함 때문에, 일부 단순한 것들은 겉보기에 전문적인 어휘에 의해 약간 수정되어 신비하게됩니다.
우선, 왜 물체를 복제해야합니까? 내가 추측 할 수있게 해주세요 : 당신은 때때로 JS의 내장 객체 문서가 너무 길다고 생각하면 다음을 수행 할 수 있습니다.
코드 사본은 다음과 같습니다.
var d = 문서;
d.by = function (id) {
반환 d.getElementById (id);
};
D.BY ( 'id'). innerHtml = 'Hello Sentsin';
위의 코드는 document.getElementById를 단순화하고 원래 문서 개체에 멤버 메소드를 추가합니다. document.hasownproperty ( 'by')에 의해 반환 된 상태 값을 통해 판단을 확인할 수 있습니다. 다음 예를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var person = {이름 : 'Xianxin', 직업 : '프론트 엔드 개발', 장소 : 'hangzhou'};
var newperson = person;
newperson.age = '24';
Console.log (사람);
// 결과 : {이름 : 'Xianxin', 직업 : '프론트 엔드 개발', 장소 : 'hangzhou', 나이 : 24}
객체가 단순히 새 변수로 전달 될 때 단순히 객체와의 별칭임을 알 수 있습니다. 이는 원래 객체 키 값이 별칭의 작업을 통해 변경됨을 의미합니다. 그러나 문제는 때때로 우리가 새로운 사람과 완전히 독립되기를 원하고 서로 사이에 동기화 관계가 없으므로 사본을 생성해야한다는 것입니다. 예를 참조하십시오.
코드 사본은 다음과 같습니다.
var cloneobj = function (obj) {
var str, newobj = obj.constructor === 배열? [] : {};
if (typeof obj! == 'Object') {
반품;
} else if (window.json) {
str = json.stringify (obj), // 직렬화 된 객체
newobj = json.parse (str); //복원하다
} 또 다른 {
for (var i in obj) {
newobj [i] = typeof obj [i] === 'Object'?
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 및 구문 분석은 ECMAScript5 사양에 속합니다. 이들은 객체 (배열 객체 포함)를 문자열로 변환하고 복원하여 물체의 깊은 복사를 실현할 책임이 있습니다. 따라서 저수준 브라우저 (예 : IE)의 경우 배열을 복사하는 경우 NewObj.concat (OBJ)을 사용할 수 있으며 일반 객체는 단순히 열거되어 값을 할당 할 수 있습니다.