JavaScript – copying objects and related problems.
Home page HTML i javascript C++ Hardware HTML i javascript Java Software SQL

JavaScript – copying objects and related problems.

Added: 2012-08-17

JavaScript is a language that performs many operations in fast way, in order to facilitate the implementation of the code. Sometimes this default acceleration can cause a problems. When you want to copy one object to another using operator "=", as a result you get a pointer to copied object.

<html>
<head>
<script type="text/javascript">

function cl(){
	this.setA = function(x){
		this.a = x;
	}

	this.getA = function(){
		return this.a;
	}
	
	var a;
}

</script>
</head>

<body>
<div id="TEMP">
</div>
</body>

<script type="text/javascript">
	document.getElementById("TEMP").innerHTML += "Start...<br>";
	var o1 = new cl();
	o1.setA(3);

	// o2 is pointer to o1
	var o2 = o1;

	// innerHTML - only used for print example
	// in the final phase of the project, do not use
	document.getElementById("TEMP").innerHTML += "o1: " + o1.getA() + "<br>";
	document.getElementById("TEMP").innerHTML += "o2: " + o2.getA() + "<br>";
	o2.setA(5);
	document.getElementById("TEMP").innerHTML += "o1: " + o1.getA() + "<br>";
	document.getElementById("TEMP").innerHTML += "o2: " + o2.getA() + "<br>";

	document.getElementById("TEMP").innerHTML += "End<br>";

</script>
</html>

Result:

Start...
o1: 3
o2: 3
o1: 5
o2: 5
End

Modifying an object o2, it really changing elements in the object o1, because it is pointer to o1. Copying object using operator "=" can cause lot off problems.

If you want to be sure, that operation copying is carried out correctly is best to apply the function clone(), which will copy all the items in. In Internet you find many samples of function clone(), their complexity depends on their capabilities. Bellow is simple function clone().

function clone(obj){
	var tt = {};
	for (var i in obj)
		tt[i] = obj[i];
	return tt;
}

and now code with using function clone()

<html>
<head>
<script type="text/javascript">

function cl(){
	this.setA = function(x){
		this.a = x;
	}

	this.getA = function(){
		return this.a;
	}
	
	var a;
}

function clone(obj){
	var tt = {};
	for (var i in obj)
		tt[i] = obj[i];
	return tt;
}
</script>
</head>

<body>
<div id="TEMP">
</div>
</body>

<script type="text/javascript">
	document.getElementById("TEMP").innerHTML += "Start...<br>";
	var o1 = new cl();
	o1.setA(3);

	// teraz kopia ;)
	var o2 = clone(o1);

	// innerHTML - zastosowano tylko w celach edukacyjnych
	// w końcowej fazie projektu javascript nie używaj go ponieważ nie jest ujęty w specyfikacji js
	document.getElementById("TEMP").innerHTML += "o1: " + o1.getA() + "<br>";
	document.getElementById("TEMP").innerHTML += "o2: " + o2.getA() + "<br>";
	o2.setA(5);
	document.getElementById("TEMP").innerHTML += "o1: " + o1.getA() + "<br>";
	document.getElementById("TEMP").innerHTML += "o2: " + o2.getA() + "<br>";

	document.getElementById("TEMP").innerHTML += "Koniec<br>";

</script>
</html>

In some case, the use of simple copying functions may not work properly. Many problems can cause highly structurally complex objects.

On page Brian Huisman is a well-written function copying.

Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (i in this) {
    if (i == 'clone') continue;
    if (this[i] && typeof this[i] == "object") {
      newObj[i] = this[i].clone();
    } else newObj[i] = this[i]
  } return newObj;
};

When you write simple classes, should use the global function clone(), but in the case of complex classes, good idea is to create in they method clone().