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 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
jquery 插件学习(一)
Aug 06 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
Javascript之Math对象详解
Jun 07 Javascript
js css+html实现简单的日历
Jul 14 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
axios封装与传参示例详解
Oct 18 Javascript
vue解决跨域问题(推荐)
Nov 10 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超级全局变量数组小结
2012/10/04 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php strftime函数的详细用法
2018/06/21 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
海飞丝的广告词
2014/03/20 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
应届生自荐书
2014/06/23 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2014年个人售房协议书
2014/10/30 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers