javascript深拷贝和浅拷贝详解


Posted in Javascript onFebruary 14, 2017

一、数组的深浅拷贝

在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。

这是为什么呢?

因为如果只是简单的赋值,它只是进行了地址的引用,所以改变一个另一个也会跟着变。

var arr = ["One","Two","Three"];
var arrto = arr;
arrto[1] = "test";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,test,Three
document.writeln("数组的新值:" + arrto + "<br />");//Export:数组的新值:One,test,Three

像上面这样就属于浅拷贝,那我们怎么样才能不改变原始的呢?

方法一:js的slice函数

var arr = ["One","Two","Three"];
var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtoo + "<br />");//Export:数组的新值:One,set Map,Three

方法二:js的concat方法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

var arr = ["One","Two","Three"];
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtooo + "<br />");//Export:数组的新值:One,set Map To,Three

二、对象的深浅拷贝

var a={name:'yy',age:26};
var b=new Object();
b.name=a.name;
b.age=a.age;
a.name='xx';
console.log(b);//Object { name="yy", age=26}
console.log(a);//Object { name="xx", age=26}

或者

var deepCopy= function(source) {
 var result={};
 for (var key in source) {
  result[key] = typeof source[key]==='object'? deepCoyp(source[key]): source[key];
 } 
 return result; 
}

object()方法:json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点。

function object(o) {

function F() {}


F.prototype = o;


return new F();

}
//这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。

使用的时候,第一步先在父对象的基础上,生成子对象:

var Doctor = object(Chinese);
//然后,再加上子对象本身的属性:
Doctor.career = '医生';
//这时,子对象已经继承了父对象的属性了。
alert(Doctor.nation); //中国

下面我们看看阮一峰的方法

比如,现在有一个对象,叫做"中国人"。

var Chinese = {


nation:'中国'

};

还有一个对象,叫做"医生"。

var Doctor ={


career:'医生'

}

请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?

三、浅拷贝

除了使用"prototype链"以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。

下面这个函数,就是在做拷贝:

function extendCopy(p) {


var c = {};


for (var i in p) { 



c[i] = p[i];


}


c.uber = p;


return c;

}

使用的时候,这样写:

var Doctor = extendCopy(Chinese);

Doctor.career = '医生';

alert(Doctor.nation); // 中国

但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。

请看,现在给Chinese添加一个"出生地"属性,它的值是一个数组。

Chinese.birthPlaces = ['北京','上海','香港'];

通过extendCopy()函数,Doctor继承了Chinese。

var Doctor = extendCopy(Chinese);

然后,我们为Doctor的"出生地"添加一个城市:

Doctor.birthPlaces.push('厦门');

发生了什么事?Chinese的"出生地"也被改掉了!

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

所以,extendCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

四、深拷贝

所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。

function deepCopy(p, c) {


var c = c || {};


for (var i in p) {



if (typeof p[i] === 'object') {




c[i] = (p[i].constructor === Array) ? [] : {};




deepCopy(p[i], c[i]);



} else {




 c[i] = p[i];



}


}


return c;

}

使用的时候这样写:

var Doctor = deepCopy(Chinese);

现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:

Chinese.birthPlaces = ['北京','上海','香港'];

Doctor.birthPlaces.push('厦门');

这时,父对象就不会受到影响了。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

alert(Chinese.birthPlaces); //北京, 上海, 香港

目前,jQuery库使用的就是这种继承方法。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
js实现简单音乐播放器
Jun 30 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 #Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 #Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 #Javascript
js基于myFocus实现轮播图效果
Feb 14 #Javascript
javascript 单例模式详解及简单实例
Feb 14 #Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 #Javascript
微信小程序 弹幕功能简单实例
Feb 14 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
pyqt4教程之widget使用示例分享
2014/03/07 Python
python自动安装pip
2014/04/24 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python+pyqt5编写md5生成器
2019/03/18 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python如何给你的程序做性能测试
2020/07/29 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
住宅使用说明书
2014/05/09 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
大国崛起日本观后感
2015/06/02 职场文书
给领导敬酒词
2015/08/12 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB