sitelink1 | http://blog.imaginea.com/deep-copy-in-javascript/ |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | http://1 |
extra_vars4 | ko |
extra_vars5 | |
extra_vars6 | sitelink1 |
Some of you might have come across this issue. When you make a copy of an object and try to change the values of the new instance, it reflects in the original one too. Well I heard this not only applies to JavaScript, but also to most other object oriented languages; not sure though.
Here is a case:
//original object definition var oOriginal = { memNum: 1, // number memStr: "I am a string", // string memObj: { test1: "Old value" // we'll test }, memArr: [ // array with object members "a string", // simple string element { // an object test2: "Try changing me" // we'll test } ] }; //test 1 var oCopy = oOriginal; // normal copy oCopy.memObj.test1 = "New value"; // Problem // - will reflect in oOriginal alert(oOriginal.memObj.test1); // will show "New value" //test 2 oCopy.memArr[1].test2 = "I am changed"; // Problem // - will reflect in oOriginal alert(oOriginal.memArr[1].test2); // will show "I am changed"
Here the problem is, the objects are never copied, only their references are. So what’s the solution? Iterate through all members of the original object, create the same members for target object and then assign corresponding values. And while doing so, we can’t forget array of objects.
We’ll add this simple line at the very top to help us detect Array objects. It basically adds our own custom extension to the Array class.
<html>
<head>
<title>Deep Copy in JavaScript</title>
<script language="javascript" type="text/javascript">
Array.prototype.__isArray = true;
</script>
.
.
Now, here is the generic method that will help in iterating through all (type of) members of our original object and copy them one-by-one regardless of the depth of the object structure:
var ObjectHandler = { //public method getCloneOfObject: function(oldObject) { var tempClone = {}; if (typeof(oldObject) == "object") for (prop in oldObject) // for array use private method getCloneOfArray if ((typeof(oldObject[prop]) == "object") && (oldObject[prop]).__isArray) tempClone[prop] = this.getCloneOfArray(oldObject[prop]); // for object make recursive call to getCloneOfObject else if (typeof(oldObject[prop]) == "object") tempClone[prop] = this.getCloneOfObject(oldObject[prop]); // normal (non-object type) members else tempClone[prop] = oldObject[prop]; return tempClone; }, //private method (to copy array of objects) - getCloneOfObject will use this internally getCloneOfArray: function(oldArray) { var tempClone = []; for (var arrIndex = 0; arrIndex <= oldArray.length; arrIndex++) if (typeof(oldArray[arrIndex]) == "object") tempClone.push(this.getCloneOfObject(oldArray[arrIndex])); else tempClone.push(oldArray[arrIndex]); return tempClone; } };
Now we’ll perform the same two tests mentioned in the ‘Problem’ block using this new helper – ObjectHandler
//test 1 var oCopy = ObjectHandler.getCloneOfObject(oOriginal); oCopy.memObj.test1 = "New value"; alert(oOriginal.memObj.test1); // will show "Old value" //test 2 oCopy.memArr[1].test2 = "I am changed"; alert(oOriginal.memArr[1].test2); // will show "Try changing me"
In general, this solution is often referred to as "Deep Copy".
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
137 | 라이노 (Rhino) 관련 링크 모음 | 황제낙엽 | 2008.07.21 | 74 |
136 | |= 비트 OR 대입 연산자 (복합대입연산자) | 황제낙엽 | 2017.03.15 | 73 |
135 | JScript Memory Leaks | 황제낙엽 | 2011.11.28 | 69 |
134 | HTTP Content-Type 정리 | 황제낙엽 | 2013.09.30 | 68 |
133 | 자바스크립트 숫자형 체크 함수 (isFinite() 함수 와 isNaN() 함수) | 황제낙엽 | 2011.12.13 | 67 |
132 | innerHTML | 황제낙엽 | 2005.12.19 | 67 |
131 | 아이디 생성 조건 검사 자바스크립트 모듈 | 황제낙엽 | 2004.11.18 | 67 |
130 | SpiderMonkey와 Tamarin | 황제낙엽 | 2008.07.14 | 66 |
129 | 상속과 Super 로의 접근 | 황제낙엽 | 2012.09.18 | 64 |
128 | 콜백지옥과 비동기제어 | 황제낙엽 | 2021.02.18 | 63 |
127 | XMLHttpRequest.setRequestHeader | 황제낙엽 | 2013.09.30 | 62 |
126 | 소숫점을 포함한 반올림 | 황제낙엽 | 2008.12.11 | 62 |
125 | Understanding delete | 황제낙엽 | 2011.11.28 | 61 |
124 | Iframe 내의 페이지 접근방법 | 황제낙엽 | 2009.11.12 | 59 |
123 | XMLHttpRequest 제대로 활용하기 | 황제낙엽 | 2017.08.01 | 58 |
122 | Javascript 내장객체 Array (배열) | 황제낙엽 | 2008.10.13 | 57 |
121 | charcode 32와 160 차이 (javascript char 160 to 32) | 황제낙엽 | 2019.05.11 | 55 |
120 | 체인 생성자(생성자 체인), 프로토타입 체인 그리고 생성자 재지정 | 황제낙엽 | 2009.08.12 | 55 |
119 | 다양한 WYSIWYG 에디터 | 황제낙엽 | 2011.11.13 | 54 |
118 | State of ECMAScript 4 ('07 12) | 황제낙엽 | 2008.07.14 | 54 |