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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
js动态切换图片的方法
Jan 20 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
react router4+redux实现路由权限控制的方法
May 03 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python实现单链表的方法示例
2019/09/03 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python之Class&Object用法详解
2019/12/25 Python
python实现五子棋程序
2020/04/24 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
模范教师事迹材料
2014/02/10 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
博士生导师推荐信
2014/07/08 职场文书
严以用权学习心得体会
2016/01/12 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python