`

分析jQuery.extend实现原理

 
阅读更多

很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理。目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正。谢谢!

下面是JQuery.extend方法源代码:

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[0] || {}, // 目标对象
		i = 1,
		length = arguments.length,
		deep = false;

    // 处理深度拷贝情况(第一个参数是boolean类型且为true)
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
        // 跳过第一个参数(是否深度拷贝)和第二个参数(目标对象)
		i = 2;
	}

    // 如果目标不是对象或函数,则初始化为空对象
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

    // 如果只指定了一个参数,则使用jQuery自身作为目标对象
	if ( length === i ) {
		target = this;
		--i;
	}

	for ( ; i < length; i++ ) {
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null ) {
			// Extend the base object
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				if ( target === copy ) {
					continue;
				}

                // 如果对象中包含了数组或者其他对象,则使用递归进行拷贝
				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
					// 处理数组
                    if ( copyIsArray ) {
						copyIsArray = false;
                        // 如果目标对象不存在该数组,则创建一个空数组;
						clone = src && jQuery.isArray(src) ? src : [];
					} else {
						clone = src && jQuery.isPlainObject(src) ? src : {};
					}

					// 从不改变原始对象,只做拷贝
					target[ name ] = jQuery.extend( deep, clone, copy );
                    
                // 不拷贝undefined值
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// 返回已经被修改的对象
	return target;
};

 从上面的分析可以看出extend函数支持深度拷贝,那么在JS中什么是深度拷贝呢?

 

我的理解如下:如果一个对象中包含引用对象(如:数组或对象),那么拷贝该对象时不是简单的进行引用对象的地址拷贝,而是将引用对象的内容复制过来保存成一个单独的对象(如下图)。


 从上图可以看出两个学生对象共用好友对象,一方对好友对象的操作同时另一方也可见。如:你将好友的姓成了“zhangsan”那么另一个对象也能看见。

 从上图可以看出两个学生对象都有自己的好友对象,一方的修改对另一方完全是透明的(无任何影响)。

以上就是我对深度复制的理解,有什么不对的请不要笑话,谢谢。

那么JQuery.extend方法怎样实现浅复制和深度复制呢?

JQuery.extend使用方式:

1、JQuery.extend(源对象)

      将源对象扩展到jQuery对象上,即把源对象的属性和方法复制到jQuery上。使用jQuery作为目标对象,源码如下:

// 如果只指定了一个参数,则使用jQuery自身作为目标对象
if ( length === i ) {
	target = this;
	--i;
}

 【 实例1】:将person对象的方法扩展到jQuery对象上。

var person = {
	sex      : 'male',
	showName : function(name){
			alert("Name: " + name);
	}
};
jQuery.extend(person); // 将person对象扩展到jQuery($)对象上

jQuery.showName("admin"); // Name: admin
$.showName("admin"); // Name: amdin
alert("Sex: " + $.sex); // Sex: male 

【实例2】验证使用此种形式的extend方法为浅复制。

var person = {
	language : ['java', 'c++', 'sql'],
	showName : function(name){
		alert("Name: " + name);
	}
};

jQuery.extend(person); // 将person对象扩展到jQuery($)对象上
	
alert($.language); // java, c++, sql
$.language.push('PL/SQL'); // 修改扩展后的对象
alert(person.language); // java, c++, sql, PL/SQL
person.language.pop();
alert($.language); // java, c++, sql

 从上面例子中可以发现,被扩展后的对象($)和源对象(person)任何一方对language数组的修改,都会影响到另一方。这就是浅复制

 

2、JQuery.extend(目标对象,源对象)

将源对象的属性和方法复制到目标对象上,采用浅复制。

【实例】分别创建person和student对象,然后通过jQuery.extend方法将person的属性和方法扩展到student对象。

var person = {
	language : ['java', 'c++', 'sql'],
	showName : function(name){
		alert("Name: " + name);
	}
};

var student = {
	showNum : function(num){
		alert("Num: " + num);
	}
};

jQuery.extend(student, person); // 将person对象扩展到指定的student对象上
	
student.showName("admin");
alert(student.language);

 

3、JQuery.extend(boolean,源对象)

此种方式中的boolean参数表示是否采用深度复制,如果为true,则使用深度复制。

【实例】将person对象扩展到jQuery对象上

var person = {
	language : ['java', 'c++', 'sql'],
	showName : function(name){
		alert("Name: " + name);
	}
};

jQuery.extend(true, person); // 将person对象扩展jQuery对象上

alert($.language); // java, c++, sql
$.language.push('PL/SQL'); // 修改扩展后的对象
alert(person.language); // java, c++, sql
person.language.pop();

 从上面例子中可以看出对$.language的修改不会影响到person中的language属性。这就是深度复制

 

4、JQuery.extend(boolean,目标对象,源对象)

决定是否采用深度复制将源对象扩展到目标对象上面。如下:

【实例】分别创建person和student对象,然后通过jQuery.extend方法将person的属性和方法扩展到student对象。

	
       var person = {
		showName : function(name){
			alert("Name: " + name);
		}
	};

	var student = {
		language : ["java", "c++", "javascript"],
		showNum : function(num){
			alert("Num: " + num);
		}
	};

	var target = jQuery.extend(person, student);
	alert(target.language);		// java, c++, javascript
	target.language.push("PL/SQL");
	alert(student.language);	// java, c++, javascript, PL/SQL
	student.language.pop();
	alert(target.language);		// java, c++, javascript

	var target2 = jQuery.extend(true, person, student);
	alert(target2.language);	// java, c++, javascript
	target2.language.push("PL/SQL");
	alert(student.language);	// java, c++, javascript
	student.language.pop();
	alert(target2.language);	// java, c++, javascript, PL/SQL

以上就是我对extend方法的理解,如有不正确的地方请指正。非常谢谢!

 

推荐:

如果你明白了jQuery.extend的工作原理,那么可以看如下两个帖子,效果更佳。

1、jQuery.extend函数详解

2、jQuery插件开发全解析

  • 大小: 12 KB
  • 大小: 16.2 KB
分享到:
评论

相关推荐

    jQuery.js执行过程分析

    本文将深入分析jQuery.js的核心执行流程,帮助读者理解其内部机制,尤其是jQuery如何利用构造函数和原型链实现其强大的功能。 #### 二、jQuery的基础构建 1. **防止重复加载**: 在jQuery的加载过程中,首先会...

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    在实现中,`jQuery.extend()` 和 `jQuery.fn.extend()` 的内部工作原理类似,它们都会处理不定数量的参数,并进行属性的合并。在处理过程中,有一些关键细节需要注意,比如: - 如果第一个参数是布尔值,那么它将被...

    分析了一下JQuery中的extend方法实现原理

    让我们深入解析一下`jQuery.extend`的实现原理。 首先,`jQuery.extend`接受一个可变数量的参数,第一个参数可以是一个布尔值,表示是否进行深度拷贝。如果为`true`,则会递归地拷贝对象和数组的子属性;如果为`...

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

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

    2014-10-13-深入理解jQuery(3)——extend1

    让我们通过源码分析来深入了解这个方法的工作原理。 首先,`jQuery.extend`方法接受多个参数,其中第一个参数可以是一个布尔值,用来决定是否执行深拷贝。如果第一个参数为`true`,则执行深拷贝;如果为`false`或未...

    jQuery 1.9.1源码分析系列(十四)之常用jQuery工具

    在详细分析jQuery 1.9.1源码系列的文章中,我们集中于探讨了jQuery库中常用工具函数的实现原理及其应用。这些工具函数广泛用于动画处理、事件处理、数据操作和性能优化等场景。本篇文章详细解释了多个核心工具函数的...

    jQuery.API源码深入剖析以及应用实现

    总结,jQuery API 的深入理解和应用不仅需要掌握其提供的各种方法,还需了解其背后的实现原理。通过对源码的剖析,我们可以更好地优化代码,提高开发效率,同时也能激发对JavaScript更深层次的理解。无论是初学者...

    jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析

    `来实现深拷贝对象,以及其背后的原理。 `jQuery.extend()`函数的基本语法如下: ```javascript jQuery.extend( [deep ], target, object1 [, objectN ] ) ``` 这个函数接受多个参数,其中`deep`是一个可选参数,...

    Jquery 源码解读

    通过对 jQuery 源码的深入解析,我们不仅可以了解到 jQuery 内部的工作原理,还可以学习到很多 JavaScript 编程的最佳实践。例如,如何使用 IIFE 来避免全局命名冲突,如何利用原型链来优化内存使用,以及如何编写可...

    jQuery源码解析

    通过分析jQuery的源码,我们可以学习到如何设计一个高性能的JavaScript库,如何组织代码使其易于理解和扩展,以及如何利用JavaScript语言特性优化代码。理解jQuery的内部机制对于提升我们的前端开发技能和编写更高效...

    jQuery插件扩展extend的简单实现原理

    需要注意的是,实际的jQuery extend实现包含了更复杂的逻辑,比如处理深拷贝、合并数组、错误处理等。 值得一提的是,虽然通过修改原型链来添加方法是一种快速且直接的方式,但它也有潜在的缺点,比如影响到所有...

    Jquery 源代码分析

    在深入理解jQuery的工作原理时,分析其源代码是极其有益的。本文将针对jQuery 1.2.6版本的源代码进行详细的解读,帮助读者理解其内部机制,提升JavaScript编程技能。 一、jQuery核心概念 1. **选择器引擎(Sizzle...

    2014-12-28-深入理解jQuery(6)——Queue1

    深入理解jQuery的队列机制是理解其动画功能和异步操作的关键。队列在jQuery中扮演着重要角色,它提供了一种有序执行任务的方式,特别适用于...理解其工作原理和用法,能够帮助我们编写更加高效和可维护的jQuery代码。

    Learning.JQuery配套源码

    源码分析可以帮助我们理解如何编写和使用jQuery插件,以及如何利用jQuery.fn.extend()来扩展jQuery对象。 7. **版本更新与优化**:随着浏览器技术的发展,jQuery也在不断进化。研究不同版本的源码差异,我们可以...

    jquery插件集合

    - 创建插件结构:一般包括一个命名空间(通常以`$.fn.extend`实现)和一个主函数。 - 添加选项:通过设置默认参数,允许用户自定义插件行为。 - 处理事件:利用jQuery的事件系统,如`on()`和`off()`,响应用户...

    jQuery-, jQuery源码解读 -- jQuery v1.10.2.zip

    源码分析可以让我们理解jQuery如何使用CSS属性和时间函数实现平滑的动画效果。 7. **插件扩展机制** jQuery的插件系统是其灵活性的关键。通过研究`$.fn.extend()`和`$.extend()`,我们可以学习如何编写自己的...

    利用jQuery实现打字机字幕效果实例代码

    ### 实现原理 打字机字幕效果的实现主要依赖于HTML、CSS和JavaScript(jQuery库)。首先,HTML部分创建了包含待显示文本的元素,如`&lt;p&gt;`标签。JavaScript部分通过jQuery选择这些元素,并使用定时器逐个输出字符,...

Global site tag (gtag.js) - Google Analytics