HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / jQuery / jQuery Deep Cloning Example

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

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.
TwitterFacebookLinkedInRedditPocket

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Comments are closed on this article!

Search Tutorials

JavaScript / jQuery Tutorials

  • Ajax Tutorial
  • jQuery – Ajax
  • jQuery – Deep Cloning
  • jQuery – Selectors
  • jQuery – All Selector
  • jQuery – Cut, Copy or Paste Events
  • jQuery – ENTER Key Press Event
  • jQuery – Keypress vs. Keydown
  • jQuery – Funny Discussion on SO
  • JavaScript – Equality vs Identity
  • JavaScript – Variable Scope Rules
  • JavaScript – Global Variables
  • JavaScript – MVC and PubSub
  • JavaScript – DOM vs. jQuery Objects
  • JavaScript – Unit Test with Jasmine
  • JavaScript – Information Masking

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Sealed Classes and Interfaces