JQuery.extend函数使用详解 $.extend

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试一下哈

文章属于自已原创，转载请说明。

参考了百度 ^_^

来源：oschina

链接：https://my.oschina.net/u/1407116/blog/220986

标签

jquery