jQuery.extend() or $.extend()方法详解

最新推荐文章于 2020-07-01 20:29:17 发布

原创最新推荐文章于 2020-07-01 20:29:17 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #ViewUI

本文详细介绍了 jQuery 中的 extend 方法，包括其源代码解析、不同调用方式的效果展示及实际应用案例，帮助读者深入理解该方法如何实现对象的扩展与合并。

jQuery目前是我们用到的前端比较流行的框架之一，有时候我们会在此基础上扩展一些方法，所以经常会用到extend方法，接下来一起了解下。

1. 首先看下jQuery的extend方法源代码

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

	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	// extend jQuery itself if only one argument is passed
	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;
				}

				// Recurse if we're merging plain objects or arrays
				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 : {};
					}

					// Never move original objects, clone them
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

2. 由上述源代码，我们很容易看出extend方法扩展原型

$.extend(param, param1, param2, param3, param4...... )

含义是将【param1, param2, param3, param4......】合并到【param】，显然合并后【param】的结构会发生变化，如果不想【param】的结构发生变化，参照如下方式：

var param=$.extend({}, param1, param2, param3, param4......); //也就是将"{}"作为param参数。

$.extend(boolean, param, param1, param2, param3, param4...... )

第一个参数代表是否进行深度拷贝，其它参数和上面一样。

$.extend(param)

将param合并到jQuery的全局对象中。

3. Example

// 第一种情况
var result = $.extend({"name": "Jhon", "age": "20"}, {"name": "LiSha", "sex": "F"}, {"address": "American", "phone": "03-05555"});
result = {"address": "American", "age": "20", "name": "LiSha", "phone": "03-05555", "sex": "F"};
// 注意： 如果两个对象存在相同名的参数，后边的值会覆盖前边的值（ex： name）


// 第二种情况
var result = $.extend({}, {"name": "Jhon", "age": "20"}, {"name": "LiSha", "sex": "F"}, {"address": "American", "phone": "03-05555"});
result = {"address": "American", "age": "20", "name": "LiSha", "phone": "03-05555", "sex": "F"};

// 第三种情况
var result = $.extend(true, {}, 
				{"name": "Jhon", "age": "20", "address": {"country": "China", "town": "YuJi"}}, 
				{"name": "LiSha", "address": {"country": "American", "city": "New York"}});
result={"address": { "country" :"American", "town": "YuJi", "city": "New York"}, "age": "20", "name": "LiSha"};

// 第四种情况
var result = $.extend(false, {}, 
				{"name": "Jhon", "age": "20", "address": {"country": "China", "town": "YuJi"}}, 
				{"name": "LiSha", "address": {"country": "American", "city": "New York"}});
result = {"address": { "country":"American", "city": "New York"}, "age": "20", "name": "LiSha"};

// 第五种情况
var result = $.extend({"aaaaa": "Jhon", "age": "20"});
// 返回jQuery对象，并且将参数添加到对象里
/** jQuery对象一部分
jQuery function(e, t){
"aaaaa":"Jhon",
"age": "20"
}
*/