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 无提示关闭窗口脚本
Aug 17 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
解决antd的Form组件setFieldsValue的警告问题
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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
ADODB的数据库封包程序库
2006/12/31 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Seajs的学习笔记
2014/03/04 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python中static相关知识小结
2018/01/02 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
销售顾问的岗位职责
2013/11/13 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
旷课检讨书大全
2014/01/21 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
个人买房协议书范本
2014/10/06 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Python中request的基本使用解决乱码问题
2022/04/12 Python