extend()是jQuery中一個重要的函數，作用是實現對對象的擴展, 它經常用于jQuery插件的開發，jQuery內部也使用它來擴展屬性方法，如上篇文章中講到的noConflict方法，就是用extend方法來擴展的。
在jQuery的API手冊中，我們看到，extend實際上是掛載在jQuery和jQuery.fn上的兩個不同方法，盡管在jQuery內部jQuery.extend()和jQuery.fn.extend()是用相同的代碼實現的，但是它們的功能卻不太一樣。來看一下官方API對extend的解釋:
我們知道，jQuery有靜態方法和實例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的第一個區別就是一個用來擴展靜態方法，一個用來擴展實例方法。用法如下:
jQuery.extend({ sayhello:function(){ console.log("Hello,This is jQuery Library"); }})$.sayhello(); //Hello, This is jQuery LibraryjQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); }})$( "input[type='checkbox']" ).check(); //所有的checkbox都會被選擇注意兩種調用插件的方式，一種是直接用$調用，另外一種是用$()調用，另外jQuery.extend()接收多個對象作為參數，如果只有一個參數，則把這個對象的屬性方法附加到jQuery上，如果含有多個參數，則把后面的對象的屬性和方法附加到第一個對象上。jQuery extend的實現源碼:
jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, 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;};很大一堆代碼，乍看起來難以理解，其實代碼的大部分都是用來實現jQuery.extend()中有多個參數時的對象合并，深度拷貝問題，如果去掉這些功能，讓extend只有擴展靜態和實例方法的功能，那么代碼如下:
jQuery.extend = jQuery.fn.extend = function(obj){ //obj是傳遞過來擴展到this上的對象 var target=this; for (var name in obj){ //name為對象屬性 //copy為屬性值 copy=obj[name]; //防止循環調用 if(target === copy) continue; //防止附加未定義值 if(typeof copy === 'undefined') continue; //賦值 target[name]=copy; } return target;}下面再來對extend方法進行注釋解釋:
jQuery.extend = jQuery.fn.extend = function() { // 定義默認參數和變量 // 對象分為擴展對象和被擴展的對象 //options 代表擴展的對象中的方法 //name 代表擴展對象的方法名 //i 為擴展對象參數起始值 //deep 默認為淺復制 var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; //當第一個參數為布爾類型是，次參數定義是否為深拷貝 //對接下來的參數進行處理 if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; // 當定義是否深拷貝時，參數往后移動一位 i = 2; } // 如果要擴展的不是對象或者函數，則定義要擴展的對象為空 if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // 當只含有一個參數時，被擴展的對象是jQuery或jQuery.fn if ( length === i ) { target = this; --i; } //對從i開始的多個參數進行遍歷 for ( ; i < length; i++ ) { // 只處理有定義的值 if ( (options = arguments[ i ]) != null ) { // 展開擴展對象 for ( name in options ) { src = target[ name ]; copy = options[ name ]; // 防止循環引用 if ( target === copy ) { continue; } // 遞歸處理深拷貝 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 : {}; } target[ name ] = jQuery.extend( deep, clone, copy ); // 不處理未定義值 } else if ( copy !== undefined ) { //給target增加屬性或方法 target[ name ] = copy; } } } } //返回 return target;};弄懂了jQuery擴展的原理，相信以后再也不用為編寫jQuery插件而煩惱了。
新聞熱點
疑難解答
