JavaScript對象克隆

douzifly 發布于2019-08-20 10:27 / 2126人閱讀

摘要：原始類型對象指的是字符串數值布爾值，引用類型對象指的是數組對象函數。既然對象分為這兩類，他們的復制克隆也是有差別的。總結根據上面的情況，另外，克隆引用對象必須采用完整克隆深度克隆，包括對象的值也是一個對象也要進行完整克隆深度克隆。

前言

之前有人問我如何克隆一個JS對象，我當時沒答上來；過后我查資料弄懂了這個問題，現在整理成文。

正文

JavaScript的一切實例都是對象，但他們也分為原始類型和引用類型。原始類型對象指的是字符串（String）、數值（Number）、布爾值（Boolean）、undefined、null，引用類型對象指的是數組（Array）、對象（Object）、函數（Function）。
既然對象分為這兩類，他們的復制克隆也是有差別的。普通對象存儲的是對象的實際數據，而引用對象存儲的是對象的引用地址，而把對象的實際內容多帶帶存放。下面我們就來看看他們克隆的區別。

原始類型對象的克隆 字符串的克隆

var x="abc";
var y=x;
y="xyz";
 
alert(x);   // "abc"
alert(y);   // "xyz"

數值的克隆

var x=1;
var y=x;
y=2;

alert(x);   // 1
alert(y);   // 2

布爾值的克隆

var x=true;
var y=x;
y=false;
 
alert(x);   // true
alert(y);   // false

我們可以看出來原始類型的克隆很簡單，只需要一個=賦值就可以了；undefined、null也是同理。

引用類型的對象克隆 數值的克隆

如果采用普通克隆：

var x=[1,2];
var y=x;
y.push(3);

alert(x);   // 1,2,3
alert(y);   // 1,2,3

由上可知，原始數組x，克隆數組y，修改了克隆數組y，但也同時修改了原始數組x，這就是引用對象的特點。那么怎樣才能達到完整的數組克隆呢？

var x=[1,2];
var y=[];
var i=0;
var j=x.length;
for(;i
這樣，兩個數值就互不干擾，實現了完整數組克隆。
對象的克隆
和數組的克隆同理，對象的完整克隆如下：
var x={a:2,b:4};
var y={};
var i;
for(i in x){
    y[i]=x[i];
}
y.c=6;
 
console.log(x);   // Object {a: 2, b: 4} 
console.log(y);   // Object {a: 2, b: 4, c: 6}
函數的克隆
var x=function(){alert(1);};
var y=x;
y=function(){alert(2);};

console.log(x);   // function(){alert(1);};
console.log(y);   // function(){alert(2);};
函數的克隆與原始類型對象克隆的方式類似；只需要使用=就可以了。
總結
根據上面的情況，另外，克隆引用對象必須采用完整克隆（深度克隆），包括對象的值也是一個對象也要進行完整克隆（深度克隆）。所以，我們可以總結并封裝一個通用的克隆方法：
function clone(obj){
    var o,i,j,k;
    if(typeof(obj)!=="object" || obj===null)return obj;
    if(obj instanceof Array){
        o=[];
        i=0;j=obj.length;
        for(;i
最后
這是我個人的博客，剛剛搭建好，歡迎大家來看看：Sunny的博客

GPU云服務器云服務器對象克隆克隆對象 js克隆對象 javascript對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80155.html

【轉】JavaScript 對象的深度克隆

摘要：在聊以下簡稱深度克隆之前，我們先來了解一下中對象的組成。克隆或者拷貝分為種淺度克隆深度克隆。淺度克隆基本類型為值傳遞，對象仍為引用傳遞。該文轉載自http://www.cnblogs.com/zichi/p/4568150.html，有部分修改。在聊JavaScript（以下簡稱js）深度克隆之前，我們先來了解一下js中對象的組成。在 js 中一切實例皆是對象，具體分為原始類型 ...

JowayYoung 2019-08-19 17:43 評論0 收藏0
javascript中對象的常用方法，深克隆和淺克隆以及凍結，擴展，密封三大屬性的區別

摘要：它將返回目標對象。封閉對象方法判斷一個對象是否被密封。為源對象為修改的屬性名或設置，同上方法返回一個給定對象自身可枚舉屬性的鍵值對數組方法返回指定對象上一個自有屬性對應的屬性描述符方法判斷兩個值是否是相同的值。對象作為引用類型，工作中免不了復制對象，下面來看看克隆的方法 Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。淺...

gplane 2019-08-22 15:37 評論0 收藏0
克隆

摘要：結構化算法優于的地方優于的地方結構化克隆可以復制對象。的克隆粒度將會跟原始對象相同，并且復制出來相同的像素數據。企圖去克隆節點同樣會拋出異常。消息通道的傳遞是異步的，使用結構化克隆算法。 JavaScript 深拷貝性能分析(漢化版) JavaScript 深拷貝性能分析 Object.assign() Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象。...

freecode 2019-08-26 11:37 評論0 收藏0
javascript設計模式與開發實踐（二）- 封裝和原型模式

摘要：對象會記住它的原型給對象提供了一個名為的隱藏屬性，某個對象的屬性默認會指向它的構造器的原型對象，即。我們通過代碼來驗證再來實際上，就是對象跟對象構造器的原型聯系起來的紐帶切記這句話，對未來理解原型鏈很有幫助。封裝封裝數據在許多語言的對象系統中，封裝數據是由語法解析來實現的，這些語言也許提供了 private、public、protected 等關鍵字來提供不同的訪問權限。例如：j...

luxixing 2019-08-22 15:05 評論0 收藏0
JavaScript 深拷貝性能分析

摘要：它接受任意數量的源對象，枚舉它們的所有屬性并分配給。所以現在怎么辦有幾種方法可以創建一個對象的深拷貝。為了防止發生任何意外，請使用而不是。我想測量哪種方法是最高性能的。圖表以下是，和中不同技術的性能。原文：Deep-copying in JavaScript - DasSur.ma 如何在 JavaScript 中拷貝一個對象？對于這個很簡單的問題，但是答案卻不簡單。引用傳值在...

MyFaith 2019-08-26 11:35 評論0 收藏0