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 Archive Network 集合
May 12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
如何利用JS将手机号中间四位变成*号
Sep 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连接Access数据库错误及解决方法
2013/06/20 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
自己动手开发jQuery插件教程
2011/08/25 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python for循环生成列表的实例
2018/06/15 Python
详解python播放音频的三种方法
2019/09/23 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
一道写SQL的面试题和答案
2013/11/19 面试题
傲盾软件面试题
2015/08/17 面试题
如何选择使用结构还是类
2014/05/30 面试题
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
工伤私了协议书范本
2014/11/24 职场文书
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技