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 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;
}
// 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外掛而煩惱了。
