jQuery deep cloning means that changing the original or cloned object independently does not make impact on other object. In other words, both objects (original as well as cloned) are completely independent of each other. You can read more about cloning in this guide to object cloning.
Method Used:
var clonedObject = jQuery.extend({}, originalObject);
jQuery deep cloning exmaple
In jquery cloning example code, I have created a User object and created two atributes i.e. first name and last name. Then I have created two getter functions for these attributes and also added another method using prototype attribute.
The jquery cloning mechanism using ‘extend’ keyword actually is used to copy /merge the properties and attributes of two or more objects into third or compeletely new object also. More details can be found More details can be found here.
A sample code looks like this:
//Create the object
var user = new User($("#fname").val(),$("#lname").val());
//Check the original object values
$("#origUser").html(user.getUserName());
//Cloning is done here
var cloned = $.extend({}, user);
//Change the firstname property
user.fname = 'Noname';
//Let's check the original and cloned object again
$("#origAfterUser").html(user.getUserName());
//Verify cloned is same as original in starting
$("#clonedUser").html(cloned.getUserName());
Example Application
[su_tabs]
[su_tab title=”Demo”]
[/su_tab]
[su_tab title=”Source Code”]
<HTML>
<HEAD>
<TITLE> jQuery Cloning Example </TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<SCRIPT LANGUAGE="JAVASCRIPT">
var User = function(fname,lname){
this.fname = fname,
this.lname = lname,
this.getFName = function(){
return this.fname;
},
this.getLName = function(){
return this.lname;
}
};
User.prototype.getUserName = function() {
return (this.getFName() + " " + this.getLName());
}
function cloneDemo(){
//Create the object
var user = new User($("#fname").val(),$("#lname").val());
//Check the original object values
$("#origUser").html(user.getUserName());
//Cloning is done here
var cloned = $.extend({}, user);
//Change the firstname property
user.fname = 'Noname';
//Let's check the original and cloned object again
$("#origAfterUser").html(user.getUserName());
//Verify cloned is same as original in starting
$("#clonedUser").html(cloned.getUserName());
}
</SCRIPT>
</HEAD>
<BODY>
<h3>jQuery Cloning Example</h3>
To clone an object, you can directly use clone() method.
<p>
First Name : <input type='text' id='fname'/>
</p>
<p>
Last Name : <input type='text' id='lname'/>
</p>
<p>
<input type='button' value='Create above User and Clone it' onclick="cloneDemo();"/>
</p>
<p>I have changed the first name of orginal Object to 'Noname'</p>
<p>
Original User : <span id='origUser'></span>
</p>
<p>
After Cloning Original User : <span id='origAfterUser'></span>
</p>
<p>
Cloned User Still is : <span id='clonedUser'></span>
</p>
</BODY>
</HTML>
[/su_tab]
[/su_tabs]
Happy Learning !!