Javascript對象複製引用機制及$.extend複製特色

首先複習一下javascript中的變量類型

基本類型

• number
• string
• boolean
• undefined
• null

引用類型

• function
• array
• date
• 正則
• 錯誤

基本類型變量的複製，內容修改後，不會對另外一變量產生影響

var a = 1;

var b =a;

a = 2;

console.log(a);//2

console.log(b);//1

引用類型變量若將A對象內容賦值給B對象，則B對象只是A對象的引用，此時若修改了B的內容，A的內容也會隨之變化

var a = {a:1,b:2};

var b = a;

b.b = 3;

console.log(a);//{a:1,b:3}

console.log(b);//{a:1,b:3}

以此得出的結論，在Javascript下，將一個對象類型變量賦值僅獲得對象的引用。

但在某些狀況下，出於對功能上的要求，必需要求變量在得到另外一個對象的複製後，各自修改內容，不會互相影響；使用Javascript原生可參照如下方式：

var arr = {"a":"1","b":"2"};

var arr1 = arr;

arr = {};

arr["a"] = 2;

console.log(arr);//{"a":2}

console.log(arr1);//{"a":"1","b":"2"}

原理是A變量是B對象變量的引用時，將A置空，再爲A設置內容，就不會再是B的引用

 

還能夠利用JSON.stringify方法和jQuery的$.parseJSON方法進行處理（略麻煩）

var data = {a:1,b:2,c:3,d:[0,1,2,3]};

var str = JSON.stringify(data);

var data1 = $.parseJSON(str);

data1["e"] = 5;

data1["d"][0] = 22;

console.log(data);//{a: 1, b: 2, c: 3, d: [0,1,2,3]}

console.log(data1);//{a: 1, b: 2, c: 3, d: [22,1,2,3], e: 5}

這種轉換的過程實際就是從新生成對象了

 

使用jQuery的$.extend()方法來擴展、複製對象

var a = {a:1,b:2};

var b = $.extend({},a);

b.b = 3;

console.log(a);//{a:1,b:2}

console.log(b);//{a:1,b:3}

以上的方式，若A變量的屬性裏還有子對象，好比：{a:1,b:2,c:{aa:11,bb:22}}，在進行復制時，子對象的內容依然是引用的方式，會互相影響

var a = {a:1,b:2,c:{aa:11,bb:22}};

var b = $.extend({},a);

b.b = 3;

b.c.aa = 33;

console.log(a);//{a:1,b:2,c:{aa:33,bb:22}}

console.log(b);//{a:1,b:3,c:{aa:33,bb:22}}

使用$.extend()方法的深度複製方式，便可杜絕以上問題，使用深度複製，即便母對象中子對象有再多層級，依然會進行完整複製，並不會進行對象引用

var a = {a:1,b:2,c:{aa:11,bb:22}};

var b = $.extend(true,{},a);

b.b = 3;

b.c.aa = 33;

console.log(a);//{a:1,b:2,c:{aa:11,bb:22}}

console.log(b);//{a:1,b:3,c:{aa:33,bb:22}}