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取消文本选定的实现代码
Nov 14 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
js onclick事件传参讲解
Nov 06 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
JavaScript实现电灯开关小案例
Mar 30 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
Mysql的常用命令
2006/10/09 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
关于幼儿的自我评价
2013/12/18 职场文书
2014年端午节活动方案
2014/03/11 职场文书
市场营销调查计划书
2014/05/02 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python