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" } */