如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法。
语法:$.extend([deep] , target , object1, [objectN] )
① deep:如果设为true 为深拷贝,默认为false 浅拷贝。
② target:表示需要拷贝的目标对象。
③ object1:被拷贝的第一个对象。
④ objectN:被拷贝的第N个对象。
1. 代码体验
<!-- js代码 --> <script> // (1) 目标对象为空对象——-此时打印出来的结果和obj对象一模一样 // let targetObj = {}; // let obj = { // id: 2, // name: '张三', // msg: { // age: 18 // } // }; // $.extend(targetObj, obj); // console.log(targetObj); // (2) 目标对象中存在有和拷贝对象相同的属性和方法,此时打印出来的结果是: // ①浅拷贝--相同属性和方法均被覆盖成obj的同名属性值和方法,即和原对象一模一样 // ②深拷贝--相同属性被覆盖,而复杂数据类型的内容没有同名则不覆盖,两者共存,若同名则覆盖 let targetObj = { id: 1, msg: { sex: '男' } }; let obj = { id: 2, name: '张三', msg: { age: 18 } }; // $.extend(targetObj, obj); // 浅拷贝 $.extend(true, targetObj, obj); // true 为深拷贝 // (3) 若将拷贝后的目标对象进行重新赋值,则得到的结果是: // ① 浅拷贝--目标对象的值肯定进行对应的改变,而原被拷贝的对象obj的属性值不会被改变,但是如果修改的是复杂数据类型的值,则也会跟着改变 // ② 深拷贝--不管目标对象修改什么类型的值,原对象obj的值都不会改变 targetObj.id = 3; // 修改属性值(简单类型) targetObj.msg.age = 22; // 修改msg中对象的值(复杂类型) console.log(targetObj); console.log(obj); </script>
之所以上述代码的拷贝会出现不同的结果,是因为 :
① 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象;简单理解就是:如果你和你朋友从不同地方前往同一个地址,到达的肯定是同一个地方,一个人在这个地方种了棵树,那么另外一个人到达时肯定也会有这棵树,即被影响了。
② 深拷贝,即加上第一个参数为true,则是完全克隆(拷贝的是对象,而不是地址),修改目标对象不会影响被拷贝对象。
下面第一张图是对浅拷贝过程的解释,第二张图是深拷贝过程的图解。
2. 堆和栈
我们知道数据类型分为简单类型和复杂类型。简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。
① 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型,比如string,number,boolean,undefined,null。但是要注意null的数据类型检测出来是object。
② 引用类型:复杂数据类型,在存储时,变量中存储的仅仅是地址(引用),地址是十六进制的,因此叫做引用数据类型,通过new关键字创建的对象(系统对象、自定义对象),如Object,Array,Date等。
正是因为数据类型的区别,所以才有了堆栈空间分配区别:
(1) 栈(操作系统):由操作系统自动分配释放存储函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型存放到栈里面;
(2) 堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放到堆里面。
注意:javaScript 中没有堆栈的概念,通过堆栈的方式,是为了更容易理解代码的一些执行方式。
因此,在上面的拷贝中,如果是浅拷贝,而且是复杂数据类型的话,那么就是把变量在栈空间里保存的堆地址复制给了目标对象,目标对象和原对象其实保存的是同一个堆地址,所以操作的是同一个对象,因此更改目标对象中复杂数据类型的值,原对象也会跟着改变。