jQuery中extend函數詳解

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

代碼如下:

 

代碼如下:
jQuery.extend(): Merge the contents of two or more objects together into the first object.(把兩個或者更多的對象合並到第一個當中)
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把對象掛載到jQuery的prototype屬性，來擴展一個新的jQuery實例方法)

 

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

 

代碼如下:
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都會被選擇

 

注意兩種調用插件的方式，一種是直接用$調用，另外一種是用$()調用，另外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;
}
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;
};

 

很大一堆代碼，乍看起來難以理解，其實代碼的大部分都是用來實現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 = {};
}
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插件而煩惱了。