首页 技术 正文
技术 2022年11月8日
0 收藏 570 点赞 1,421 浏览 1678 个字

$.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来这部分代码的是否执行的。

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,489
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,904
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,737
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,489
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,128
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,290