JavaScript對象克隆

douzifly 發(fā)布于2019-08-20 10:27 / 2115人閱讀

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

前言

之前有人問我如何克隆一個(gè)JS對象，我當(dāng)時(shí)沒答上來；過后我查資料弄懂了這個(gè)問題，現(xiàn)在整理成文。

正文

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

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

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

數(shù)值的克隆

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

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

引用類型的對象克隆 數(shù)值的克隆

如果采用普通克隆：

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

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

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

var x=[1,2];
var y=[];
var i=0;
var j=x.length;
for(;i
這樣，兩個(gè)數(shù)值就互不干擾，實(shí)現(xiàn)了完整數(shù)組克隆。
對象的克隆
和數(shù)組的克隆同理，對象的完整克隆如下：
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}
函數(shù)的克隆
var x=function(){alert(1);};
var y=x;
y=function(){alert(2);};

console.log(x);   // function(){alert(1);};
console.log(y);   // function(){alert(2);};
函數(shù)的克隆與原始類型對象克隆的方式類似；只需要使用=就可以了。
總結(jié)
根據(jù)上面的情況，另外，克隆引用對象必須采用完整克隆（深度克隆），包括對象的值也是一個(gè)對象也要進(jìn)行完整克隆（深度克隆）。所以，我們可以總結(jié)并封裝一個(gè)通用的克隆方法：
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
最后
這是我個(gè)人的博客，剛剛搭建好，歡迎大家來看看：Sunny的博客