`

jQuery中深浅拷贝原理分析及实现(容易看懂的)

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

//如有错误欢迎指出

//深浅拷贝
//写过复杂的,做了各种判断的那种
//想想写个简单容易一眼看到头的
var a1={};
var a2={
	namex:"xxx",
	getName:function(){
		alert(namex);
	},
	xx:{
		namexx:"xxx",
	}
};
//一个向另一个加另一个上面没有的属性
//很简单
var copy=function(){
	//浅拷贝
	var
		name,
		target=arguments[0],
		src=arguments[1];
		for(name in src){
			if(src[name]===target[name]){
				continue;
			}
			target[name]=src[name];
		}
}
//copy(a1,a2);
//console.info(a1);//

//深拷贝
//浅拷贝代码改改

//注意两个问题
//明确谁向谁拷贝
//第二个要有返回值(return),不然返回都为 undefined
var deepCopy=function(){
	var
		name,
		target=arguments[0],
		src=arguments[1];
		//再做个判断,若是再次拷贝时,target[name]很可能为空
		if(!(typeof(target)==="object")){
			target={};
		}
		for(name in src){
			if(src[name]===target[name]){
				continue;
			}
			/*
			if( target !==null && typeof(src[name])==="object"){
				target[name]=deepCopy(target[name],src[name]);
			}else{
				target[name]=src[name];
			}
			*/
			
			if( src[name] !==null && typeof(src[name])==="object"){
				//src就是引用xx  --->target -------->  {namexx:"xxx",} 
				target[name]=deepCopy(target[name],src[name]);
				//target[name]=deepCopy(target[name]!==undefined?target[name]:{} ,src[name]);
				console.trace();
			}else if(src[name]!==undefined){
				target[name]=src[name];
			}
			//target[name]=src[name];
		}
	return target;
};
var a3={};
var a4={
	namex:"xxx",
	getName:function(){
		alert(namex);
	},
	xx:{
		namexx:"xxx",
	}
};
deepCopy(a3,a4);
console.info(a3);
a4.namex="我是谁";//深拷贝后不会再受到影响
console.info(a3);

 

分享到:
评论

相关推荐

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

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

    jquery购物车 实现原理分析

    jquery购物车 实现原理分析

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

    资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...

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

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

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

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

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

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

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jQuery无缝滚动原理分析

    实现jQuery无缝滚动的核心原理主要涉及以下几个方面: 1. **jQuery库**:jQuery是一个轻量级的JavaScript库,提供了丰富的DOM操作、事件处理、动画效果等功能,极大地简化了JavaScript的开发工作。在无缝滚动中,...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    **jQueryPager:基于JQuery的Ajax分页插件Pagination实现** 在Web开发中,当数据量庞大时,分页是一种常见的优化用户体验的方式。jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现...

    Jquery1.26版本的源码分析

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

    Jquery实现的分页功能

    在Jquery中,我们可以使用HTML和CSS创建分页布局,然后利用Jquery事件监听来响应用户的点击操作,发送Ajax请求获取新的数据。 分页组件的核心功能包括: 1. 计算总页数:根据服务器返回的总数据条数和每页展示的条...

    jQuery.js执行过程分析

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

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

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

    jquery工作原理

    **jQuery工作原理详解** jQuery,一个著名的JavaScript库,自2006年发布以来,以其简洁易用的API和强大的功能赢得了开发者们的广泛喜爱。它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本文将...

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

    六、jQuery 的实现原理: 1. 通过 jQuery 原型属性的 `init` 方法来创建对象。`init` 是 jQuery 的构造函数,用于初始化元素集合并返回 jQuery 对象。 2. 对 `init` 方法内 `this` 指向的处理。在 `init` 方法...

    jQuery源码分析系列.pdf

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

    使用jquery实现表格动态分页

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

    jQuery实现的轮播图

    实现自动轮播,点击索引切换图片,点击左右按钮实现切换图片

    jquery实现的多选下拉框

    《jQuery实现的多选下拉框深度解析》 在网页开发中,为了提供更好的用户体验,我们经常需要使用到多选下拉框。jQuery库为我们提供了丰富的功能,使得创建交互式的多选下拉框变得轻而易举。在这里,我们将深入探讨...

    jQuery实现图片预览功能

    本教程将深入讲解如何使用jQuery实现图片预览功能。 首先,我们需要了解基本的HTML结构。在`index.html`文件中,你需要创建一个`<input>`元素用于让用户选择图片,以及一个`<div>`元素作为预览区域: ```html <!...

Global site tag (gtag.js) - Google Analytics