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


Posted in Javascript onApril 10, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
Vue2递归组件实现树形菜单
Apr 10 #Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 #Javascript
javascript防篡改对象实例详解
Apr 10 #Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
ES6教程之for循环和Map,Set用法分析
Apr 10 #Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 #Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 #Javascript
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
javascript编写简易计算器
2017/05/06 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
记录Django开发心得
2014/07/16 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python复制文件操作实例详解
2015/11/10 Python
python定时关机小脚本
2018/06/20 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
致标枪运动员加油稿
2014/02/15 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis