javascript深拷贝的原理与实现方法分析

 更新时间:2017年04月10日 11:21:39   作者:布瑞泽的童话  
这篇文章主要介绍了javascript深拷贝的原理与实现方法,简单分析了值传递和引用传递的原理与实现方法,并结合实例形式给出了深拷贝的具体实现技巧,需要的朋友可以参考下

本文实例讲述了javascript深拷贝的原理与实现方法。分享给大家供大家参考,具体如下:

要讲JavaScript的拷贝,就得先讲讲javascript中的值传递引用传递

javascript中没有一个具体的语法来规定哪些参数是引用传递,而其他语言中都有明文规定,比如 C# 中的 ref 和 PHP 中的 & 。

这也是javascript众多弊端中的一个。

我们先看看下面这段代码:

//值传递
var i = 3;
var j = i;
j = 4;
document.write(i);//3
//引用传递
var m = [1];
var n = m;
n[0] = 2;
document.write(n[0]);//2

说明,javascript中只有简单类型是值传递,而其他复杂类型比如数组、对象都是默认就是引用传递的

那么我们如果需要复制一个对象呢?就必须自己定义方法:

//深度拷贝函数,其实就是值传递
function cloneObject(srcobj){
  var tarobj=new Object();
  for(var key in srcobj){//判断对象中是否继续为对象
    tarobj[key]=typeof srcobj[key]==='object'?cloneObject(srcobj[key]):srcobj[key];
  }
  return tarobj;
}
//验证深度拷贝函数的使用
// 测试用例:
var srcObj = {
  a: 1,
  b: {
    b1: ["hello", "hi"],
    b2: "JavaScript"
  }
};
var abObj = srcObj;//引用传递
var tarObj = cloneObject(srcObj);
srcObj.a = 2;
srcObj.b.b1[0] = "Hello";
console.log(abObj.a);//2
console.log(abObj.b.b1[0]);//Hello,说明普通的=是一种引用传递
console.log(tarObj.a);   // 1
console.log(tarObj.b.b1[0]);  // "hello",说明我们定义的深拷贝是值传递

其实就是通过实例化一个新的对象,从而在堆中开辟一块新的内存空间,使得栈中的变量名指向堆中的新内容。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • js使用Array.prototype.sort()对数组对象排序的方法

    js使用Array.prototype.sort()对数组对象排序的方法

    这篇文章主要介绍了js使用Array.prototype.sort()对数组对象排序的方法,实例分析了Array.prototype.sort()的原理与相关的使用技巧,需要的朋友可以参考下
    2015-01-01
  • input框中的name和id的区别

    input框中的name和id的区别

    这篇文章主要介绍了input框中的name和id的区别介绍,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 跟我学习javascript的垃圾回收机制与内存管理

    跟我学习javascript的垃圾回收机制与内存管理

    跟我学习javascript的垃圾回收机制与内存管理,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js实现选项卡效果

    js实现选项卡效果

    这篇文章主要为大家详细介绍了js实现选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js和jquery使按钮失效为不可用状态的方法

    js和jquery使按钮失效为不可用状态的方法

    js和jquery如何使按钮失效,很简单,只要设置disabled属性为true即为不可用状态即可,下面有个简单的示例,大家可以参考下
    2014-01-01
  • JS前端开发之exec()和match()的对比使用

    JS前端开发之exec()和match()的对比使用

    match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,下面这篇文章主要给大家介绍了关于JS前端开发之exec()和match()的对比使用的相关资料,需要的朋友可以参考下
    2022-09-09
  • JS实现字符串翻转的方法分析

    JS实现字符串翻转的方法分析

    这篇文章主要介绍了JS实现字符串翻转的方法,结合实例形式分析了javascript字符串使用reverse方法、字符串遍历方法以及针对输入字符串的遍历、逆序输出等方法实现字符串反转相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • JavaScript判断变量数据类型的常见方法小结

    JavaScript判断变量数据类型的常见方法小结

    在JavaScript开发中,了解和判断变量的数据类型是编写健壮代码的基础,变量的类型可以在运行时改变,这为开发者带来了灵活性的同时也增加了复杂性,本文将深入探讨几种常见的判断变量类型的技巧,并结合实际案例进行分析,需要的朋友可以参考下
    2024-12-12
  • js实现简单锁屏功能实例

    js实现简单锁屏功能实例

    这篇文章主要介绍了js实现简单锁屏功能的方法,实例分析了javascript操作页面元素显示与隐藏的相关技巧,涉及javascript操作元素属性与鼠标、键盘事件的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 如何基于原生javaScript生成带图片的二维码

    如何基于原生javaScript生成带图片的二维码

    这篇文章主要介绍了如何基于原生javaScript生成带图片的二维码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11

最新评论