在jQuery的API手冊中，我們看到，extend實際上是掛載在jQuery和jQuery.fn上的兩個不同方法，盡管在jQuery內(nèi)部jQuery.extend()和jQuery.fn.extend()是用相同的代碼實現(xiàn)的，但是它們的功能卻不太一樣。來看一下官方API對extend 的解釋:

代碼如下:

復(fù)制代碼代碼如下:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個或者更多的對象合并到第一個當(dāng)中)

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把對象掛載到j(luò)Query的prototype屬性，來擴展一個新的jQuery實例方法)

我們知道，jQuery有靜態(tài)方法和實例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的第一個區(qū)別就是一個用來擴展靜態(tài)方法，一個用來擴展實例方法。用法如下:

復(fù)制代碼代碼如下:

jQuery.extend({

sayhello: function (){

console.log( "Hello,This is jQuery Library" );

}

})

$.sayhello(); //Hello, This is jQuery Library

jQuery.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都會被選擇

注意兩種調(diào)用插件的方式，一種是直接用$調(diào)用，另外一種是用$()調(diào)用，另外jQuery.extend()接收多個對象作為參數(shù)，如果只有一個參數(shù)，則把這個對象的屬性方法附加到j(luò)Query上，如果含有多個參數(shù)，則把后面的對象的屬性和方法附加到第一個對象上。jQuery extend的實現(xiàn)源碼:

復(fù)制代碼代碼如下:

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;

}

if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

target = {};

}

if ( length === i ) {

target = this ;

--i;

}

for ( ; i < length; i++ ) {

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 ;

}

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 );

// Don't bring in undefined values

} else if ( copy !== undefined ) {

target[ name ] = copy;

}

}

}

}

// Return the modified object

return target;

};

很大一堆代碼，乍看起來難以理解，其實代碼的大部分都是用來實現(xiàn)jQuery.extend()中有多個參數(shù)時的對象合并，深度拷貝問題，如果去掉這些功能，讓extend只有擴展靜態(tài)和實例方法的功能，那么代碼如下:

復(fù)制代碼代碼如下:

jQuery.extend = jQuery.fn.extend = function (obj){

//obj是傳遞過來擴展到this上的對象

var target= this ;

for ( var name in obj){

//name為對象屬性

//copy為屬性值

copy=obj[name];

//防止循環(huán)調(diào)用

if (target === copy) continue ;

//防止附加未定義值

if ( typeof copy === 'undefined' ) continue ;

//賦值

target[name]=copy;

}

return target;

}

下面再來對extend方法進行注釋解釋:

復(fù)制代碼代碼如下:

jQuery.extend = jQuery.fn.extend = function () {

// 定義默認(rèn)參數(shù)和變量

// 對象分為擴展對象和被擴展的對象

//options 代表擴展的對象中的方法

//name 代表擴展對象的方法名

//i 為擴展對象參數(shù)起始值

//deep 默認(rèn)為淺復(fù)制

var options, name, src, copy, copyIsArray, clone,

target = arguments[0] || {},

i = 1,

length = arguments.length,

deep = false ;

//對接下來的參數(shù)進行處理

if ( typeof target === "boolean" ) {

deep = target;

target = arguments[1] || {};

i = 2;

}

if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

target = {};

}

if ( length === i ) {

target = this ;

--i;

}

//對從i開始的多個參數(shù)進行遍歷

for ( ; i < length; i++ ) {

// 只處理有定義的值

if ( (options = arguments[ i ]) != null ) {

// 展開擴展對象

for ( name in options ) {

src = target[ name ];

copy = options[ name ];

// 防止循環(huán)引用

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;

};