javascript对浅拷贝和深拷贝的详细解释

下面的小系列将为您带来关于JavaScript中面向对象的深度和浅度复制的简单介绍。边肖认为这很好。现在和大家分享一下，给大家做个参考。

1.轻复制：复制一个引用，所有引用对象都指向一个数据，这个数据可以修改。

2.深度复制(复杂):复制变量值。对于非基本类型变量，在复制前递归到基本类型变量。

这里画一个简单的图加深对：的理解

首先，数组的深副本和浅副本

使用JavaScript操作数组时，我们经常需要备份数组。事实证明，如果我们简单地把它们交给其他变量，那么我们只需要改变其中的任何一个，然后其他的就会改变，从而导致问题。

var arr=['一'，'二'，'三']var arrto=arrarrto[1]=“test”；Document.writeln('数组的原始值：' arr ' br/')；//Export:数组的原始值：One，test，Threedocument.writeln('数组的新值：' arrto ' br/')；//Export:数组的新值：一，测试，三。像上面这样的直接赋值方法是浅复制。在很多情况下，这不是我们想要的结果。事实上，我们想要的是arr的值不变，不是吗？

方法1:js的切片函数

var arr=['一'，'二'，'三']var arr too=arr . slice(0)；arrtoo[1]=“设置映射”；Document.writeln('数组的原始值：' arr ' br/')；//Export:数组的原始值：一，二，三document.writeln('数组的新值：' arr too ' br/')；//Export:数组的新值：一，设置Map，三方法2:js的concat方法

var arr=['一'，'二'，'三']var arrtooo=arr . concat()；arrtooo[1]=“将映射设置为”；Document.writeln('数组的原始值：' arr ' br/')；//Export:数组的原始值：一，二，三document.writeln('数组的新值：' arrtooo ' br/')；//Export:数组的新值：一，设置映射为，三2。物体的深拷贝和浅拷贝

var a={name:'yy '，age :26 }；var b=新对象()；b . name=a . name；b . age=a . age；a.name=' xxconsole . log(b)；//对象{ name='yy '，age=26 } console . log(a)；//Object {name='xx '，age=26}是遍历一个对象的属性，并将其分配给一个新的对象。

var DeepCopy=function(source){ var result={ }；for(源中的var键){ result[key]=type of source[key]===' object '？DeepCoyp(source[key]): source[key]；}返回结果；}在jQuery中举一个例子：

jquery。extend=jquery。fn。extend=function(){//1 .将扩展方法扩展到JQ(函数)下边：扩展静态方法//2.jQuery.fn.extend把扩展扩展到jq.fn下且jQuery.fn=jQuery.prototype扩展实例方法//1.2.功能相似定义变量选项，名称，src，复制，复制阵列，克隆，//定义一些变量目标=参数[0] || {},//目标元素是【0】第一个元素$.extend(a，{ name : 'hello' }，{ age : 30 })；i=1，//第一个元素的位置长度=参数。长度，//第一个个对象的元素deep=false//是否是深拷贝默认错误的不是//处理深度复制情况看是不是深拷贝情况if(target===' boolean '){//是布尔值deep=targettarget=参数[1]| | { };//目标元素是第二个$.扩展(true，a，b ) //跳过布尔型，目标I=2；} //当目标是字符串或其他东西时处理大小写（在深度复制中可能)看参数正确不如果(目标类型！=='对象！jQuery.isFunction(target) ) { //当目标不是对象或者不是函数的时候target={ }；//变成一个空的jason } //如果只传递了一个参数，则扩展jQuery本身看是不是插件情况如果(长度===i ) { //只写了一个对象要把这个对象扩展到日本季刊日本季刊源码上静态方法或者是实例方法目标=这个；//这个是$或者$();-我；}//可能有多个对象情况for(；一、长度；i ) { //仅处理非空/未定义的值，如果((选项=参数)！=null ) {//看后边的对象是否都有值//扩展（选项中的名称){ src=目标[名称]的基础对象；copy=options[name]；//如果（目标===复制){//防止循环引用继续；//跳出本次循环继续执行//$.extend(a，{ name : a })；循环引用a也是一个对象} //如果我们要合并普通对象或数组，请递归深拷贝如果(深度复制(jquery。isplayanoobject(copy)| |(copy is array=jquery。isarray(copy))){//是深拷贝且需有var b={姓名： {年龄： 30 } }且b必须是对象自变量（杰森)或者是个数组//递归if (copyIsArray ) { //数组copy isarray=false clone=src jquery . isarray(src)？src :[]；//定义一个空数组} else {//Jason clone=src jquery。isplayanoobject(src)？src : { }；//看原有的属性有没有且是不是詹森定义一个空Jason }//var a={ name : { job : ' it ' } }；看有没有原有的属性有的话在原有的上边添加//var b={ name : { age : 30 } }；//$.扩展(真，a，b)；//a继承b//控制台。日志(a)；a{姓名：{职务： 'it '，年龄： 30}}如果只有一个{} 则只有，年龄： 30 //绝不移动原始对象，克隆(a)它们的目标[ name ]=jQuery.extend(深度、克隆、复制)；//调用函数本身进行进一步的递归处理//不要引入未定义的值浅拷贝} else if(复制！==未定义){ target[name]=copy；//直接复制因为里边没有对象} } } } //返回修改后的对象返回目标；};以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。