javaScript 拷贝

一： 浅拷贝

Object.assign(target, ...sources) ；target：目标对象。sources：任意多个源对象。

/**

* 浅拷贝Object.assign(target, ...sources)

*/

var obj1 = {

a: "hello",

b: {

a: "hello",

b: 21}

};

var cloneObj1= Object.assign({}, obj1);

cloneObj1.a = "changed";

cloneObj1.b.a = "changed";

console.log(obj1.a); //hello

console.log(obj.b.a); // "changed"

/**

* 浅拷贝遍历赋值

*/

function simpleClone(initalObj) {

var obj = {};

for ( var i in initalObj) {

obj[i] = initalObj[i];

}

return obj;

}

var obj = {

a: "hello",

b:{

a: "world",

b: 21

},

c:["Bob", "Tom", "Jenny"],

d:function() {

alert("hello world");

}

};

var cloneObj = simpleClone(obj);

console.log(cloneObj.a);

console.log(cloneObj.b);

console.log(cloneObj.c);

console.log(cloneObj.d);

//更改原对象中的a,b,c,d，看看拷贝过来的对象是否变化

cloneObj.a = "changed";

cloneObj.b.a = "changed";

cloneObj.b.b = 25;

cloneObj.c = [1, 2, 3];

cloneObj.d = function() { alert("changed"); };

console.log(obj.a); //hello

console.log(obj.b); //{a:"changed",b:25},事实上就是只有对象是拷贝的引用类型

console.log(obj.c); //['Bob','Tom','Jenny']

console.log(obj.d); //...alert("hello world")

二：深拷贝

/**

* 深拷贝，递归实现方式

*/

function deepClone(initalObj, finalObj) {

var obj = finalObj || {};

for (var i in initalObj) {

var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况

if(prop === obj) {

continue;

}

if (typeof prop === 'object') {

obj[i] = (prop.constructor === Array) ? [] : {};

arguments.callee(prop, obj[i]);

} else {

obj[i] = prop;

}

}

return obj;

}

var str = {};

var obj = { a: {a: "hello", b: 21} };

deepClone(obj, str);

console.log(str.a);

/**

* 深拷贝，使用Object.create()方法

*/

function deepClone(initalObj, finalObj) {

var obj = finalObj || {};

for (var i in initalObj) {

var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况

if(prop === obj) {

continue;

}

if (typeof prop === 'object') {

obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);

} else {

obj[i] = prop;

}

}

return obj;

}