目录
1 前置问题
2 拷贝继承实现
3 拷贝封装
4 浅拷贝和深拷贝
5 应用广泛
场景:想使用某个对象中的属性,但是又不能直接修改它,于是就可以创建一个该对象的拷贝
1 前置问题
直接将一个对象source赋值给另一个对象target,此时两个是同一个对象(共享),修改任一个对象,另一个对象也会随之改变(不能实现上述问题)
var source={name:"张三",age:18};
var target=o3
- var source={name:"张三",age:18}
- var target={};
- target.name=source.name
- target.age=source.age;
这段代码可以实现需求,但是如果属性过多,则会出现代码冗余现象。
2 拷贝继承实现
1、已经拥有了o3对象
2、创建一个o3对象的拷贝(克隆):for...in循环
a、取出o3对象中的每一个属性
b、获取到对应的属性值
c、把属性值放到o4中
3、修改克隆对象,把该对象的name属性改为"李四"
。。。后续如果修改了o4对象中的相关属性,就不会影响到o3
代码实现:
<script>var o3={name:"张三",age:18};var o4={};for (var key in o3) {//key就是o3对象中的每一个属性var value = o3[key];o4[key] = value;}o4.name="李四"console.log(o4); //最终的目标对象的结果</script>
3 拷贝封装
上面的方式很明显无法重用,实际代码编写过程中,很多时候都会使用拷贝继承的方式,所以为了重用,可以编写一个函数把他们封装起来:
<script> 函数:封装拷贝代码块function extend(source,target){for (var key in source) {var value = source[key];target[key] = value;}}var o3={name:"张三",age:18};var o4={};extend(o3,o4);o4.name="李四";var o5={};extend(o3,o5);o5.name="wangwu"; </script>
4 浅拷贝和深拷贝
- 浅拷贝知识拷贝一层属性,没有内部对象
- 深拷贝其实是利用递归的原理,将对象的若干层属性拷贝出来
var students=[{name:"",age:""},{name:"",age:""}
]
5 应用广泛
+ 由于拷贝继承在实际开发中使用场景非常多,所以很多库都对此有了实现
- jquery:$.extend
+ es6中有了对象扩展运算符仿佛就是专门为了拷贝继承而生:
var source={name:"张三",age:18}
//让target是一个新对象,同时拥有了name、age属性var target={ ...source }var target2={ ...source,age:20 } 修改属性值