jQuery 深度克隆示例 · HowToDoInJava 中文系列教程

# jQuery 深度克隆示例 > 原文： [https://howtodoinjava.com/jquery/jquery-deep-cloning-example/](https://howtodoinjava.com/jquery/jquery-deep-cloning-example/) jQuery 深度克隆意味著獨立更改原始對象或克隆對象不會對其他對象產生影響。換句話說，兩個對象（原始對象和克隆對象）都彼此完全獨立。您可以在對象克隆的[**指南**](//howtodoinjava.com/java/cloning/a-guide-to-object-cloning-in-java/ "A guide to object cloning in java")中閱讀有關克隆的更多信息。 ![jquery_logo](https://img.kancloud.cn/96/cb/96cb5fd4553b3d346758fb0258add75b_300x300.png) 使用方法： ```java var clonedObject = jQuery.extend({}, originalObject); ``` ## jQuery 深度克隆示例在 jquery 克隆示例代碼中，我創建了一個`User`對象并創建了兩個屬性，即名字和姓氏。然后，我為這些屬性創建了兩個設置器函數，還使用了原型屬性添加了另一種方法。實際上，使用“`extend`”關鍵字的 jquery 克隆機制用于將兩個或多個對象的屬性和屬性復制/合并到第三個或完全新的對象中。可以在中找到更多詳細信息。示例代碼如下所示： ```java //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()); ``` **示例應用** ```java <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> ``` **祝您學習愉快！**