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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP中的替代语法简介
2014/08/22 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
用tensorflow搭建CNN的方法
2018/03/05 Python
python实现手机销售管理系统
2019/03/19 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python飞机大战游戏实例讲解
2020/12/04 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
财政局长自荐信范文
2013/12/22 职场文书
周年庆典主持词
2014/04/02 职场文书
大学生活自我评价
2014/04/09 职场文书
好学生评语大全
2014/05/05 职场文书
中层干部培训方案
2014/06/16 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
小学运动会前导词
2015/07/20 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
教你部署vue项目到docker
2022/04/05 Vue.js