jQuery为开发插件提供了两个方法,分别是:
1. jQuery.fn.extend():给jQuery对象提供方法。
2. jQuery.extend():为扩展jQuery类本身添加方法。
先看源码是怎么实现的,截取自JQuery-1.11.0,不想看,可以直接越过。。
源码截取出来了,中文地方为我加的说明
jQuery.extend = jQuery.fn.extend = function() { var src, copyIsArray, copy, name, options, clone, //target初始化为取第一个参数 OR {}, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; //这里的判断target是否为boolean,引申extend方法的另种形式 extend(boolean,dest,src1,src2,src3...)。 // Handle a deep copy situation if ( typeof target === "boolean" ) { deep = target; // skip the boolean and the target 看不懂么?越过第一个boolean把target设置为第二个参数,i++... target = arguments[ i ] || {}; i++; } // Handle case when target is a string or something (possible in deep copy) //target类型判断,类型不对,就初始化为{} if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // extend jQuery itself if only one argument is passed //就里引申为另一个方法extend(src),只有一个参数。 if ( i === length ) { 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; };
从源码中可以看出
1.jQuery.extend和jQuery.fn.extend是同一个方法,但是具体的作用却不一样。因为在调用jQuery.extend 和jQuery.fn.extend 函数时,函数内部this是不同的,jQuery.extend()内this当然是jQuery,而jQuery.fn.extend当然是jQuery.fn,这样jQuery.extend()为扩展jQuery类本身.为类添加新的方法。jQuery.fn.extend()是给jQuery对象添加方法。
2. extend(src):将src对象的属性和方法逐一复制给jQuery或jQuery对象
例如:
$.extend({ hello:function(){alert('hello Josean');} }); //就是将hello方法合并到jquery的全局对象中
同理
$.fn.extend({ hello:function(){alert();} }); //就是将hello方法合并到jquery的实例对象中。
3. extend(dest, src1, src2, src3..srcN):将src1, src2…对象的属性和方法逐一复制给dest
对象。需注意的是,在复制的过程中,排在后面的参数(对象)将会覆盖排在前面的参数和属性的方法。
dest对象数据就会生改变,如果不想改dest刚传‘{}’
例如:
var result=$.extend({},{name:"test1",age:21},{name:"test2",sex:"man"}) //结果: result={name:"test2",age:21,sex:"man"}
4. extend(boolean, dest, src1,src2…):jQuery的extend方法提供了“深层拷贝”的功能,如果传入第一个参数为boolean型变量,则该变量为深层拷贝的标志,第二个参数为extend方法的目标对象,其余参数为需要进行继承的“父类”。如果第一个参数的值为true(深度拷贝),并且dest和src元素都包括相同名称的对象属性,则对该对象的属性和方法再进行一次复制。
var result=$.extend( , {}, { name: John, location: {city: Beijing,county:China} }, { last: Resig, location: {state:MA ,county:USA} } ); //结果 result={name:"John",last:"Resig", location:{city:"Beijing",state:"MA",county:"USA"}}
后面都是以$.extend为例子,大家可以试试$.fn.extend试一下哈
文章属于自已原创,转载请说明。
参考了百度 ^_^