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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
layui实现数据表格点击搜索功能
Mar 26 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python实发邮件实例详解
2019/11/11 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python中format函数如何使用
2020/06/22 Python
美国折扣网站:jClub
2017/08/07 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
给老师的一封感谢信
2015/01/20 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
设置IIS Express并发数
2022/07/07 Servers
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis