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

文章屬於自已原創，轉載請說明。

參考了百度  ^_^