jquery源码解析：jQuery扩展方法extend的详解

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

jQuery中要扩展方法或者属性都是通过extend方法实现的。所谓的jQuery插件也是通过extend方法实现的。

jQuery.extend扩展的是工具方法，也就是静态方法。jQuery.fn.extend扩展的是实例方法。

当只传入一个对象的时候，里面的方法和属性是扩展到this上的。比如：

$.extend(　　{　　aaa:function(){}, bbb:function(){}　　}　　) ，这里的this是$,所以用这种形式$.aaa()调用。

$.fn.extend(　　{　　aaa:function(){}, bbb:function(){}　　}　　) ，这里的this是$.fn(原型),所以用这种形式$("").aaa()调用。

当传入多个对象的时候，后面的对象都是扩展到第一个对象身上。比如：

var a ={};

$.extend(　　a, {name:"hello"}, {age:30}　　)，这时a = {name:"hello",age:30}

还可以做深拷贝和浅拷贝（拷贝继承）。比如：

var a = {};var b = {　　name:{age:30}　　};

$.extend( a , b ); a.name.age = 20，这时你打印b.name.age，你会发现也是20.这就是浅拷贝。没有对对象进行复制，只对简单字符做了复制（如果name是字符串，那么改变a.name的值，即便是浅拷贝也不会影响b.name的值）。但是你可以使用深拷贝：

$.extend( true , a , b ); a.name.age = 20，这时你打印b.name.age，你会发现是30，没有改变。因为深拷贝，无论b的属性是什么，都会重新复制一份。

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

var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false; //默认为浅拷贝

if ( typeof target === "boolean" ) { //看第一个参数是否是boolean
deep = target; //如果是，就证明目标对象是第二个参数，第一个参数是来判断是不是深拷贝的
target = arguments[1] || {};
i = 2;
}

if ( typeof target !== "object" && !jQuery.isFunction(target) ) { //必须为对象或者函数
target = {};
}

if ( length === i ) { //如果只有一个对象的时候，目标对象指向this，往this上扩展方法和属性
target = this;
--i;
}

for ( ; i < length; i++ ) {
if ( (options = arguments[ i ]) != null ) { //判断扩展的对象不是null
for ( name in options ) { //取对象中的属性名
src = target[ name ]; //取目标对象的name属性值
copy = options[ name ]; //取扩展对象的name属性值

if ( target === copy ) {

//解决循环引用的问题，比如:var a ={};$.extend( a , { name:a } )，如果不做这个处理，将会得到一个死循环的对象(a{name:{name:{name:{...}}}})，加了这个，就扩展不上，a还是{}
continue;
}

if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

//如果是深拷贝，并且扩展对象的name属性值存在，并且扩展对象是一个对象自变量（或者是一个数组），就进入if语句

if ( copyIsArray ) { //如果扩展对象的name属性值是数组，进入if语句
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];

//如果目标对象的name属性值是一个数组，就取这个数组，如果不是，就取[]

} else { //如果扩展对象的name属性值是对象自变量
clone = src && jQuery.isPlainObject(src) ? src : {};

//如果目标对象的name属性值是一个对象自变量，就取这个对象自变量，如果不是，就取{}
}

target[ name ] = jQuery.extend( deep, clone, copy );

//递归调用extend，深拷贝扩展对象的name属性值（对象或者数组）到clone。

//递归结束后，返回clone，赋值给目标元素的name属性

//这就把扩展对象的所有属性都扩展到目标对象中了。