js深克隆浅克隆方法(js深克隆方法)
导语:JavaScript的深克隆和浅克隆
最近在复习,发现前端好多知识点牵一发动全身。
比如我想看一下JQuery的extend源码,就不得不再好好看看深克隆浅克隆的问题。
什么是深克隆?
我们都知道,JavaScript有六种基本的数据类型。
五种基本的数据类型:string,number,undefined,boolean,null
(在内存中表现为一个值,保存在栈中)
一种复杂的数据类型(引用类型):object 【function,array,object】
(在内存中表现为一个指针,保存在堆中)
将一个对象的所有属性均复制,并将该对象与原对象放在内存中不同的位置,此时,改变新对象的属性不会对原对象造成影响,这种行为叫做深克隆。
我们还是先看浅克隆吧。。。
var people= { name:"sun", age:24, hobby:["eat","shopping"], son:{ age:3
看他们的爱好!!.png
浅克隆只是简单的复制对象,若对象其中一个属性是引用值,由于引用型变量保存的是内存的一个地址,所以后来的
hobby
属性,都指向内存中的同一块地址,最后输出的结果同样相同。从上面的例子也可以看出,
name
等原始值的改变,并不会影响原对象中的原始值。解决克隆引用值问题,还是需要深度克隆的!
for-in循环遍历对象上的所有属性,判断是否为引用值,若是,进行递归,直到所有属性都为原始值为止。
拷贝出来后,就是一个全新对像,就和之前没什么关系了,以前的改变也不能对新的产生影响!!
var people= { name:"sun", age:24, hobby:["eat","shopping"], son:{ age:3
看他们的爱好!!.png
一些扩展
js里的concat函数
concat函数对数组进行了深度克隆
var a = [1,2,3];
jQuery.extend( [deep ], target, object1 [, objectN ] )
deep
类型: Boolean
如果是true,合并成为递归(又叫做深拷贝)默认值为false,表示浅拷贝。
target
类型: Object
对象扩展。这将接收新的属性。
object1
类型: Object
一个对象,它包含额外的属性合并到第一个参数.
objectN
类型: Object
包含额外的属性合并到第一个参数
1.合并两个对象,并修改第一个对象
var a= { name:"sun", age:24, hobby:["eat","shopping"], son:{ age:3
b覆盖了a的原有属性.png
2.当继承的对象属性中有引用类型的时候,两个对象同时指向一个对象,改变一个另一个也随之改变。如果有相同属性,后边的会覆盖前边的
var a= { name:"sun", age:24, son:{ age:3, name:"小名"
本文内容由快快网络小开创作整理编辑!