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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
express中static中间件的具体使用方法
Oct 17 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
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python getopt模块处理命令行选项实例
2014/05/13 Python
不可错过的十本Python好书
2017/07/06 Python
Python 面试中 8 个必考问题
2018/11/16 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
python实现弹窗祝福效果
2019/04/07 Python
python exit出错原因整理
2020/08/31 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
会议邀请函范文
2014/01/09 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
课外访万家心得体会
2014/09/03 职场文书
世界环境日活动总结
2015/02/11 职场文书
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python