js对象浅拷贝和深拷贝详解


Posted in Javascript onSeptember 05, 2016

本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下

1.浅拷贝

拷贝就是把父对像的属性,全部拷贝给子对象。

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

var Chinese = {
nation:'中国'
}
var Doctor = {

career:'医生'
}

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('厦门');

看一下输入结果

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

结果是两个的出生地都被改了。

所以,extendCopy() 只是拷贝了基本类型的数据,我们把这种拷贝叫做“浅拷贝”。

2.深拷贝

因为浅深拷有如此弊端所以我们接下来看一下深拷贝

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

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); //北京, 上海, 香港

这样就完成了拷贝;

$.extend()

jquery 中$.extend()如同。

$.extend( [deep ], target, object1 [, objectN ] )

 •deep
类型: Boolean
如果是true,合并成为递归(又叫做深拷贝)。
 •target
类型: Object
对象扩展。这将接收新的属性。
 •object1
类型: Object
一个对象,它包含额外的属性合并到第一个参数.
 •objectN
类型: Object
包含额外的属性合并到第一个参数 

当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。

如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

请记住,目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:

var object = $.extend({}, object1, object2);

在默认情况下,通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值,就可以了解这一点。然而,如果将 true 作为该函数的第一个参数,那么会在对象上进行递归的合并。

警告:不支持第一个参数传递 false 。

1. 合并两个对象,并修改第一个对象。

var object1 = {
 apple: 0,
 banana: { weight: 52, price: 100 },
 cherry: 97
};
var object2 = {
 banana: { price: 200 },
 durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

// Assuming JSON.stringify - not available in IE<8
console.log( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

2. 采用递归方式合并两个对象,并修改第一个对象。

var object1 = {
 apple: 0,
 banana: { weight: 52, price: 100 },
 cherry: 97
};
var object2 = {
 banana: { price: 200 },
 durian: 100
};

// Merge object2 into object1, recursively
$.extend( true, object1, object2 );

// Assuming JSON.stringify - not available in IE<8
console.log( JSON.stringify( object1 ) );
//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

3. 合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );


console.log(JSON.stringify( defaults ));
console.log(JSON.stringify( options ));
console.log(JSON.stringify( settings ));
//defaults -- {"validate":false,"limit":5,"name":"foo"}
//options -- {"validate":true,"name":"bar"}
//settings -- {"validate":true,"limit":5,"name":"bar"}

Javascript 判断对象是否相等

在Javascript中相等运算包括”==”,”===”全等,两者不同之处,不必多数,本篇文章我们将来讲述如何判断两个对象是否相等? 你可能会认为,如果两个对象有相同的属性,以及它们的属性有相同的值,那么这两个对象就相等。那么下面我们通过一个实例来论证下:

var obj1 = {
  name: "Benjamin",
  sex : "male"
}

var obj2 = {
  name: "Benjamin",
  sex : "male"
}

//Outputs: false
console.log(obj1 == obj2);

//Outputs: false
console.log(obj1 === obj2);

通过上面的例子可以看到,无论使用”==”还是”===”,都返回false。主要原因是基本类型string,number通过值来比较,而对象(Date,Array)及普通对象通过指针指向的内存中的地址来做比较。看下面一个例子:

var obj1 = {
  name: "Benjamin",
  sex : "male"
};

var obj2 = {
  name: "Benjamin",
  sex : "male"
};

var obj3 = obj1;

//Outputs: true
console.log(obj1 == obj3);

//Outputs: true
console.log(obj1 === obj3);

//Outputs: false
console.log(obj2 == obj3);

//Outputs: false
console.log(obj2 === obj3);

上例返回true,是因为obj1和ob3的指针指向了内存中的同一个地址。和面向对象的语言(Java/C++)中值传递和引用传递的概念相似。 因为,如果你想判断两个对象是否相等,你必须清晰,你是想判断两个对象的属性是否相同,还是属性对应的值是否相同,还是怎样?

function person(name) { 
  this.name=name; 
} 

var p1 = new person("p1"); 
var p2 = new person("p2"); 

console.log(p1 == p2); //false 

person.prototype.sayHi = function() { 
  // do sayHi here 
} 

console.log(p1.sayHi() == p2.sayHi()); //true 
console.log(p1.sayHi() === p2.sayHi()); //true

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
JS实现评价的星星功能
Aug 20 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 #Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 #Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 #Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 #Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 #Javascript
jQuery实现的自动加载页面功能示例
Sep 04 #Javascript
jQuery简单实现中间浮窗效果
Sep 04 #Javascript
You might like
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python搜索指定目录的方法
2015/04/29 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python中温度单位转换的实例方法
2020/12/27 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
个人找工作的自我评价
2013/10/17 职场文书
项目资料员岗位职责
2013/12/10 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
美术教师个人总结
2015/02/06 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书