首页 > 代码库 > jquery源码解析:jQuery扩展方法extend的详解
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 = http://www.mamicode.com/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属性
//这就把扩展对象的所有属性都扩展到目标对象中了。
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
return target;
}
jQuery中使用的是拷贝继承。
加油!
jquery源码解析:jQuery扩展方法extend的详解