浅拷贝
浅拷贝是处理栈内存。
不同形式的浅拷贝示例：
- 基本类型
如果是基本类型：number、string、boolean、null、undefined，浅拷贝复制的是值。
var a = 1;
var b = a; // 拷贝
b = 2;
console.log('a=',a); // a = 1
- 引用类型
如果是引用类型：object、array，浅拷贝复制的是引用。
var small = {
name: 'jane',
age: 18
};
var big = small; // 拷贝
big.age = 30;
console.log('small=',small); // small= { name: 'jane', age: 30 }
检测数据类型
var isType = function (obj) {
var str = Object.prototype.toString.call(obj);
var type = str.slice(8, str.length - 1);
return type;
}
如果采用=直接赋值的方式拷贝引用类型，浅拷贝复制的是引用，这样会造成目标对象和源对象共用一个对象，改变其中一个，就会对另外一个产生影响。
浅拷贝对象的另一种实现方式(遍历对象，并返回新的对象)：
var extend = function (target, source) {
// 检测参数
if (!source || arguments.length !== 2) {
throw new Error("参数错误")
}
var sourceType = isType(source),
targetType = isType(target);
// 基本类型
if(targetType !== "Object" && targetType !== "Array" && targetType !== "Function") {
target = {};
}
if(sourceType !== "Object" && sourceType !== "Array" && sourceType !== "Function") {
return target = {};
}
// 遍历源对象中的属性
for (var property in source) {
var copy = source[property];
// 将源对象中的属性复制到目标对象中
target[property] = copy;
}
// 返回目标对象
return target;
}
测试用例
var target = {},
source = {
name: "jane",
age: 18,
link: [ 1, 2]
};
target = extend(target, source);
target.age = 30; // 修改目标对象中的基础类型，不影响源对象
target.link[0] = 100; // 修改目标对象中的数组，影响源对象
console.log(target); // { name: 'jane', age: 30, link: [ 100, 2 ] }
console.log(source); // { name: 'jane', age: 18, link: [ 100, 2 ] }
对比打印结果，可以发现浅拷贝只能复制一层结构，当存在嵌套时，就捉襟见肘了。
深拷贝
深拷贝不仅处理栈内存，而且处理堆内存。
var deepExtend = function (target, source) {
// 检测参数
if (!source || arguments.length !== 2) {
throw new Error("参数错误")
}
var sourceType = isType(source),
targetType = isType(target);
// 基本类型
if(targetType !== "Object" && targetType !== "Array" && targetType !== "Function") {
target = {};
}
if(sourceType !== "Object" && sourceType !== "Array" && sourceType !== "Function") {
return target = {};
}
// 遍历源对象中的属性
for (var property in source) {
var copy = source[property];
if (source === copy) { continue; }
// 将源对象中的属性复制到目标对象中
if (isType(copy) === "Object") {
// 递归
target[property] = arguments.callee(target[property] || {}, copy);
} else if (isType(copy) === "Array") {
// 递归
target[property] = arguments.callee(target[property] || [], copy);
} else {
target[property] = copy;
}
}
// 返回目标对象
return target;
}
测试用例
var target = {},
source = {
name: "jane",
age: 18,
link: [ 1, 2]
};
target = deepExtend(target, source);
target.age = 30; // 修改目标对象中的基础类型，不影响源对象
target.link[0] = 100; // 修改目标对象中的数组，不影响源对象
console.log(target); // { name: 'jane', age: 30, link: [ 100, 2 ] }
console.log(source); // { name: 'jane', age: 18, link: [ 1, 2 ] }
参考
理解jquery的深拷贝源码
javascript深拷贝--司徒正美
javaScript中的浅拷贝和深拷贝
深入剖析JavaScript的深复制
