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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
Vue多组件仓库开发与发布详解
Feb 28 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
php四种基础算法代码实例
2013/10/29 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
深入研究React中setState源码
2017/11/17 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python获取list下标及其值的简单方法
2016/09/12 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
django项目中新增app的2种实现方法
2020/04/01 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
四年级语文教学反思
2014/02/05 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers