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 写的简单进度条控件
Jan 22 Javascript
JQuery学习总结【一】
Dec 01 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
bootstrap table表格客户端分页实例
Aug 07 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
详解如何修改 node_modules 里的文件
May 22 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
咖啡知识大全
2021/03/03 新手入门
php下的权限算法的实现
2007/04/28 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
新闻内页-JS分页
2006/06/07 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python中for in的用法详解
2020/04/17 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
什么是URL
2015/12/13 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
美术专业个人自我评价
2014/01/18 职场文书
环境建设实施方案
2014/03/14 职场文书
终止劳动合同协议书
2014/04/14 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
spring 项目实现限流方法示例
2022/07/15 Java/Android