`

jQuery中深浅拷贝原理分析及实现(较为复杂的,做了详细的判断)

阅读更多
//测试Chrome版本  40.0.2214.115 m

//如有错误欢迎指出

//在此做一些相关方法的测试
//第一个each
//将来改成jq的时候为了方便,速度更快,防止覆盖,直接这样定义
var toString={}.toString;
var class2type={};
var hasOwn={}.hasOwnProperty;
var isArray=Array.isArray;
var indexOf=[].indexOf;

var each=function(obj,callback){
	var 
		value,
		length=obj.length,
		i=0,
		isArray=isArrayLike(obj);
		//两种情况
		//类数组
		if(isArray){
			for(;i<length;i++){
				//若是返回false,则直接跳出
				value=callback.call(obj,i,obj[i]);
				if(value===false){
					break;
				}
			}
		}else{
			for(i in obj){
				value=callback.call(obj,i,obj[i]);
				if(value===false){
					break;
				}
			}
		}
		return obj;
};

//第二个判断是否像数组一样的对象

var isArrayLike=function(obj){
	var 
		length=obj.length;
		
	//判断为空
	if(obj==null){
		return false;
	}
	
	if(type(obj)==="object" ||typeof(obj)==="function"){
		return false;
	}
	
	return type(obj)==="array" ||length===0 || (length>0 &&(length-1) in obj);
};


//第三个判断类型
var type=function(obj){
	//排除为空的
	if(obj==null){
		return obj+"";
	}
	//做判断,如果是object或者function类型的时候
	//不是执行后面
	return  typeof obj==="object" ||typeof obj==="function"  ? class2type[toString.call(obj)] : typeof obj;
};

each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(_,name){
	class2type["[object "+name+"]"]=name.toLowerCase();  
});

//第四个一些杂一点的函数
var isFunction=function(obj){
	return type(obj);
};
var isWindow=function(obj){
	return obj!==null && obj.window===window;
};
//第个判断是否是字面量
//判断之前做一个测试,形如 {}
var isPlainObject=function(obj){
	//第一判断,如果不是object类型直接返回false
	//第二判断是否是节点类型
	//第三window
	if(type(obj)!=="object" ||obj.nodeType||isWindow(obj)){
		return false;
	}
	//当是{}或者是new Object() 时为真,这两种是符合的  只有object对象的原型中有这个方法
	if(hasOwn.call(obj.constructor.prototype,"isPrototypeOf")){
		return true;
	}
	
};

//第五个方法extend拷贝
var extend=function(){
	//第一方面分深浅拷贝   deep
	//第二方面   在jquery中分为向jquery对象添加对象或方法,在此是向window下添加对象或方法,
	//另一个就是一对象或方法向其它的对象上添加
	//
	var src,copy,copyIsArray,name,
		clone,//递归时要传的参数
		options,//要拷贝的对象
		target=arguments[0]||{},
		length=arguments.length,
		i=1,
		deep=false;
		
		if(typeof(target)==="boolean"){
			target=arguments[1]||{};
			deep=true;
			i=i+1;
		}
		//实际上当参数为以下两种情况是  就是上面所说的第二方面
		//第一种是:直接就有一个参数  {}
		//第二个就是:两个参数  true,{}
		if(i===length){
			target=this;//this是window
			i=i-1;
		}
		//当target,不是对象,函数的这种情况也要排掉
		if(!typeof(target)==="object" && !typeof(target)==="function"){
			target={};
		}
		
		for(;i<length;i++){
			for(name in options=(arguments[i]!==null) && arguments[i]){
				src=target[name];
				copy=options[name];
				if(src===copy){
					continue;
				}
				copyIsArray=isArray(copy)
				//if(deep&&copy||(isPlainObject(copy))|| (copyIsArray=isArray(copy))){
				if(deep&&copy && (isPlainObject(copy))|| copyIsArray){
					if(copyIsArray){
						copyIsArray=false;
						clone=src && isArray(src) ? src :[];//若不是数组类型,改为数组类型
					}else{
						clone=src && isPlainObject(src) ? src :{};
					}
					
					target[name]=extend(deep,clone,copy);
				}else if(copy !==undefined){
					target[name]=copy;
				}
			}
		}
	return target;
};

 

分享到:
评论

相关推荐

    jQuery实现轮播图及其原理详解

    本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" name="viewport" content="width=device-width,...

    jquery购物车 实现原理分析

    jquery购物车 实现原理分析

    jQuery技术内幕:深入解析jQuery架构设计与实现原理

    资源名称:jQuery技术内幕:深入解析jQuery架构设计与...接着详细分析了底层支持模块的源码实现,包括:选择器 Sizzle、异步队列 Deferred、数据缓存 Data、资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    浅拷贝深拷贝之jQuery中的$.extend分析

    这篇博客“浅拷贝深拷贝之jQuery中的$.extend分析”深入探讨了`$.extend`在浅拷贝和深拷贝场景下的工作原理,这对于理解JavaScript对象的复制机制至关重要。 浅拷贝是指创建一个新对象,然后将源对象的引用属性复制...

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

    《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和...

    JQUERY技术内幕:深入解析QUERY架构设计与实现原理 完整版 共两个包

    深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...

    jQuery源码详细分析中文注释

    jQuery以其简洁的API和强大的功能深受前端开发者的喜爱,但其背后的实现原理对于初学者来说可能较为复杂。这份中文注释的源码分析旨在帮助开发者逐步揭开jQuery的神秘面纱,提升JavaScript编程技能。 首先,jQuery...

    JQuery源码详细中文注释_Jquery源码分析_

    总结,jQuery源码分析涉及的内容广泛,包括选择器引擎、事件处理、DOM操作、动画效果、Ajax通信以及插件开发等多个方面。深入理解jQuery源码,有助于我们更好地利用它来构建高效、易维护的Web应用。通过阅读中文注释...

    Jquery实现的分页功能

    Jquery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript的DOM操作,使得开发者可以轻松地实现各种复杂的交互效果。对于分页功能,Jquery提供了一种灵活的方式来处理,通过编写少量的代码就可以...

    jQery中类数组判断的实现原理及代码实现

    本文将深入探讨jQuery中类数组判断的实现原理,并通过代码实现来帮助理解这一概念。 首先,我们要明确什么是类数组对象。类数组对象是指拥有一个`length`属性和索引元素,但不完全符合数组特性的对象。它们通常没有...

    jQuery.js执行过程分析

    - **实现原理**:该方法实际上是一个深拷贝的过程,能够将一个或多个对象的属性复制到目标对象中。这意味着你可以向jQuery添加新的静态方法或修改原型上的方法。 2. **`jQuery.fn.extend`与`jQuery.extend`的区别*...

    Jquery1.26版本的源码分析

    Jquery1.26版本的源码分析,pdf格式文档,相当清淅的书籍,前端开发者必看的类库书籍,...采用CSS方式查找Dim节点,jQuery类数组的分析,Dom元素的属性及操作,Event事件分析及应用,jquery中的Ajax实现及源码分析等内容.

    jQuery中的Sizzle引擎分析

    在jQuery中,Sizzle引擎主要实现了以下功能: 1. **CSS选择器支持**:Sizzle引擎支持W3C CSS 2.1和部分CSS 3的选择器,如ID选择器 (#id)、类选择器 (.class)、标签选择器 (tag)、后代选择器 (selector1 selector2)...

    jQuery源码分析系列.pdf

    - **异步队列Deferred**:探讨jQuery中用于处理异步操作的`Deferred`对象,解释其工作原理和如何实现链式调用。 - **队列Queue**:讲解队列在jQuery动画和AJAX请求中的作用,以及如何管理和控制队列中的任务执行...

    jquery的总体架构分析及实现示例详解

    jQuery整体框架甚是复杂,也不易读懂,这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为:入口模块、底层模块和功能模块。这里,我们以jquery-1.7.1为例进行分析。 jquery的总体架构 代码如下: 16 ...

    jquery工作原理

    它可以处理XMLHttpRequests,处理JSONP,甚至与jQuery的Promise对象一起使用,以实现更复杂的异步流程控制。`$.get()`和`$.post()`是简化的版本,用于快速实现GET和POST请求。 ### 6. 插件生态系统 jQuery的另一个...

    4、jQuery原理,模拟实现jQuery扩展1

    2. 较为低级的实现:可以使用 `jQuery` 函数来调用,例如 `jQuery(document).ready(function() { ... })`,这种方式在某些特殊情况下可能更为适用。 六、jQuery 的实现原理: 1. 通过 jQuery 原型属性的 `init` ...

    myJQuery自己动手实现一个JQuery

    本项目"myJQuery"旨在通过分析jQuery的核心功能,帮助开发者理解其工作原理,并动手实现一个简化的版本,以提升对JavaScript和前端开发的理解。 【描述】:这个项目的目标是通过实践,学习jQuery的基本构造和函数,...

    jQuery判断注册填写信息的例子很全面的

    在这个例子中,我们将详细探讨如何使用JavaScript库jQuery来实现一系列常见的注册信息验证,如用户名、电话号码、身份证和邮箱等。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计...

    使用jquery实现表格动态分页

    本教程将详细讲解如何使用jQuery库来实现表格的动态分页,同时结合Java后端进行数据的动态查询和分页处理。 首先,让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时,仅加载当前显示的数据,...

Global site tag (gtag.js) - Google Analytics