$.extend 是jquery常用的一个方法,该方法通过传第一个布尔型参数可以指定为深复制还是浅复制,如何使用不在本文讨论。

先来理解下什么是深复制:

var ob1 = {

  'name' : 'Jack' ,

  'child' : {

    'name' : 'Tom',

    'age' : '7'

  }

};

var ob2 = {

  'name' : 'Rose' ,

  'child' : {

    'name' : 'Mike'

  }

};

浅复制后的结果:{'name' : 'Jack' ,'child' : {'name' : 'Mike'}};

深复制后的结果:{'name' : 'Jack' , 'child' : {'name' : 'Mike', 'age' : '7'}};

不同之处在于浅复制没有继承ob1.child.age属性,而是直接用ob2.child属性直接进行覆盖了,即只进行了第一层属性的合并,对子元素如果是对象的话,该对象的内部属性不会被继承合并,而会被直接覆盖。

两种复制各有自身的使用场景。

那么jquery是怎么实现的呢?大家可以看源码,但是源码看着都头疼!重要的是知道原理然后自己进行实现,先看下浅复制合并,具体思路上代码如下:

    //浅复制
function lowerExtend(){
var obj1 = arguments[0];//第一个参数
var obj2 = arguments[1];//第二个参数
         //判断是否是对象
if(typeof(obj1) != 'object' || typeof(obj2) != 'object'){
console.warn('Not object');
return
}
//存放结果对象
var resObj = {}; for(var i in obj1){
//如果对象2里面有对象1的这个属性则继承过来
if(obj2.hasOwnProperty(i)){
resObj[i] = obj2[i];
}else{
resObj[i] = obj1[i];
}
} for(var j in obj2){
//上一步已经把obj1和obj2共有的属性全替换为obj2的属性,所以这里只需把obj1里不具有的obj2的属性复制即可
if(!obj1.hasOwnProperty(j)){
resObj[j] = obj2[j]
}
}
return resObj;
}

  如果理解了以上浅复制合并的代码,那么深复制起始就是在前复制上加了一层递归调用,整改一下变成以下代码就是深复制:

//深复制
function deepExtend(){
var obj1 = arguments[0];
var obj2 = arguments[1];
//存放结果对象
var resObj = {};
if(typeof(obj1) != 'object' || typeof(obj2) != 'object'){
console.warn('Not object');
return
}
//遍历obj1的所有属性
for(var i in obj1){
//如果对象2里面有对象1的这个属性则继承过来,否则resObj放obj1[i]
if(obj2.hasOwnProperty(i)){
if(typeof(obj1[i]) == 'object'){
//如果obj1[i]是一个对象,那么递归调用这个方法,并把resObj[i]的属性设置为结果
resObj[i] = deepExtend(obj1[i],obj2[i])
}else{
resObj[i] = obj2[i];
}
}else{
resObj[i] = obj1[i];
}
} for(var j in obj2){
//上一步已经把obj1和obj2共有的属性全替换为obj2的属性,所以这里只需把obj1里不具有的obj2的属性复制即可
if(!obj1.hasOwnProperty(j)){
resObj[j] = obj2[j];
}
}
return resObj;
}

着色部分为重点不同的地方,jquery源码里其实是通过传入的第一个参数为true和false来这部分代码的是否执行的。

好了,这篇为本人的第一篇博客,不足之处希望大家不吝赐教,本人定虚心接受。

实现 $.extend 的深复制和浅复制的更多相关文章

  1. .Net深复制、浅复制

    在.Net,大家都知道引用类型的深复制.浅复制吧. ,一般int等值类型是值类型(复制时是直接传值),一般的类(List<T>,Class)是引用类型(复制时传地址),默认是浅复制.若ob ...

  2. js中的深复制和浅复制

    在实际情况中经常会遇到对对象复制的问题.比如在处理项目中的一笔多结构的数据存储或者调用,这个时候你就要对对象(json)进行操作,而不同的操作根据不同的需求来定义.其中最常见最普遍的是对对象的复制,重 ...

  3. C++学习基础七——深复制与浅复制

    一.深复制与浅复制基本知识 深复制和浅复制,又称为深拷贝和浅拷贝. 深复制和浅复制的区别如下图1所示: 图1 图1表示的是,定义一个类CDemo,包含int a和char *str两个成员变量, 当深 ...

  4. php对象当参数传递 && php深复制和浅复制

    把对象当参数传递给方法,在方法里改过对象后,影响到外面的对象  因为对象是引用传递过去的 class Book { public $name; public function __construct( ...

  5. iOS 集合的深复制与浅复制

    概念 对象拷贝有两种方式:浅复制和深复制.顾名思义,浅复制,并不拷贝对象本身,仅仅是拷贝指向对象的指针:深复制是直接拷贝整个对象内存到另一块内存中. 一图以蔽之 再简单些说:浅复制就是指针拷贝:深复制 ...

  6. Java中对象的深复制和浅复制详解

    1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. ⑵ ...

  7. Java中的深复制与浅复制

    1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不 复制它所引用的对象. ...

  8. C#深复制和浅复制

    本文在于巩固基础 我们来看看什么是深复制.浅复制: C#中对于数据的复制机制虽然简单但是容易让人误解.C#数据类型大体分为值类型(value type)与引用类型(reference type).对于 ...

  9. C#深复制与浅复制

    C#深复制与浅复制 C#中对于数据的复制机制虽然简单但是容易让人误解.C#数据类型大体分为值类型(value type)与引用类型(reference type).对于值类型数据,复制的时候直接将数据 ...

随机推荐

  1. ajax修改密码

    <div>用户名:<input type="text" id="uid" /><span id="tt" st ...

  2. 数据可视化-使用EXCEL和PS制作一个复杂饼图

    一个朋友让我帮忙用饼图去展现一下一堆数据,我说行,后来他给我后,我看到是一堆貌似从什么仪器中导出的一堆使用分隔符分开的文本文档,使用excel打开后如下(为了保护隐私忽略了用字母和数字代替原来的内容: ...

  3. python 开发者 精品

    当 Python 和 R 遇上北京二手房 http://mp.weixin.qq.com/s?timestamp=1473262097&src=3&ver=1&signatur ...

  4. ksoap2- webservice

    1.概述 对于J2ME访问远端的Web Service,除了官方标准JSR 172,我们还有两种选择: l         kSOAP l         Wingfoot Wingfoot是由Win ...

  5. Linux服务器开发/测试环境搭建-流程

    1.MariaDB yum 安装/初始化/授远程权限 yum安装 在MariaDB官网根据Linux系统查找您所需要的db版本:https://downloads.mariadb.org/mariad ...

  6. thinkPHP 模板中变量的使用

    一.变量输出                1.标量输出(普通)        2.数组输出                {$name[1]}                {$name['k2'] ...

  7. --@angularJS--独立作用域scope绑定策略之&符策略

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>s ...

  8. Intent的属性及Intent-filter配置——指定Action、Category调用系统Activity

    Intent代表了启动某个程序组件的“意图”,实际上Intent对象不仅可以启动本应用内程序组件,也可启动Android系统的其他应用的程序组件,包括系统自带的程序组件——只要权限允许. 实际上And ...

  9. Spring mvc基本原理

    http://blog.csdn.net/xtu_xiaoxin/article/details/8796499 http://www.cnblogs.com/wawlian/archive/2012 ...

  10. 排名前10的H5、Js 3D游戏引擎和框架

    由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.A ...