深拷贝和浅拷贝

       

最近跟同事聊到javascript中的深拷贝和浅拷贝的问题,想跟大家分享一下。

 首先值类型和引用类型的存储特征:
  a.值类型赋值的存储特点
    1.就是将变量内的数据全部拷贝一份,存储给新的变量。
    2.例如:var =123; var num2=num;表示变量中存储的数字是123,然后将数据拷贝一份,也就是将123拷贝一份,那么内存中有两个数据,j将拷贝的数据给num2。
    3.其特点是内存中有两个数据副本。
  b.引用类型的赋值: var o={name:'hf'}; var obj=o;
     1.赋值就是将变量o中存储的数据拷贝一份,然后将将数据赋值给obj。
    2.内存中只有一份数据。但是需要注意的是如果利用obj修改的name属性影响o中的name。

代码实现:

    

<script>
var car = { name: '法拉利' };
var p = { name: '张三', age: 19, car: car };



// var pCopy = p; // 这个不是拷贝, 没有对对象做任何拷贝行为
// 浅拷贝的代码实现
// var pCopy = {};
// pCopy.name = p.name;
// pCopy.age = p.age;
// pCopy.car = p.car;



// 深拷贝的代码实现
var pCopy = {};
pCopy.name = p.name;
pCopy.age = p.age;
pCopy.car = {};
pCopy.car.name = p.car.name;


</script>

 

案例:

             

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
var deepCopy = function () {
// 1, 创建一个对象
var temp = {};
// 2, 拷贝属性, 在判断如果是引用类型需要深拷贝
for ( var k in this ) {
if ( typeof this[ k ] === 'object' ) {
temp[ k ] = this[ k ].deepCopy();
} else {
temp[ k ] = this[ k ];
}
// temp[ k ] = this[ k ];
}
// 3, 返回对象
return temp;
}

var car = { name: '法拉利' };
var p = { name: '张三', age: 19, gender: '男', car: car };

// 让所有的对象都有 拷贝的 方法
car.deepCopy = deepCopy;
p.deepCopy = deepCopy;

var newP = p.deepCopy();

p.name = '李四';
p.age = 20;
p.gender = '女';
p.car.name = '兰博基尼';


</script>
</html>

 

 

最后值类型作为函数传递的特征是函数内外是两个不同的变量,仅仅是值相等;而引用类型作为参数传递的特征函数内外是两个不同的变量,但是指向同一个对象。

原文地址:https://www.cnblogs.com/just123/p/5746400.html