搜索
写经验 领红包

js深克隆浅克隆方法(js深克隆方法)

导语:JavaScript的深克隆和浅克隆

js深克隆浅克隆方法(js深克隆方法)

最近在复习,发现前端好多知识点牵一发动全身。

比如我想看一下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:"小名"

本文内容由快快网络小开创作整理编辑!