jQuery Deep Cloning Example

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.

jquery_logo

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 !!

Leave a Reply

0 Comments
Inline Feedbacks
View all comments

About Us

HowToDoInJava provides tutorials and how-to guides on Java and related technologies.

It also shares the best practices, algorithms & solutions, and frequently asked interview questions.