JQuery_2.1.0_日记 4.29 $.extend
因为在JQuery一切皆JQuery,所以JQuery没有EXT那么恐怖的继承体系,比起EXT的Ext.extends(),$.extend()函数还是很好理解的,只是把一个对象的属性和方法添加到目标对象上.刚出生的JQuery是很弱小的,JQuery源码后面和我们自己扩展都是通过$.extend()函数.
Test_Html
<
body
>
<
div
id
=
"div1"
>
div1
</
div
><
div
id
=
"div2"
>
div2
</
div
>
<
span
id
=
"span1"
>
span1
</
span
><
span
id
=
"span2"
>
span2
</
span
><
span
id
=
"span3"
>
span3
</
span
>
</
body
>
Test_Script
$.extend(target, src);
target.show();
//function[native object]说明this是javascript内建对象构造函数
$.extend(src);
$.show();
//function[native object]说明this是javascript内建对象构造函数,JQuery = function(){};
$.fn.extend(src);
$(
'div'
).show();
//function(selector, context)
可以看到想扩展JQuery的静态方法和属性就$.extend,想扩展JQuery对象就用$.fn.extend,当然也可以扩展自己的简单js对象.
再看$.extend()源码之前，先看一个深克隆和浅克隆的例子.
浅克隆
var
target = {};
var
src = {copy:{name:
'原始数据'
}};
$.extend(target, src);
target.copy.name =
'覆盖数据'
;
alert(src.copy.name);
//覆盖数
据
深克隆
var
target = {};
var
src = {copy:{name:
'原始数据'
}};
$.extend(true, target, src);
target.copy.name =
'覆盖数据'
;
alert(src.copy.name);
//原始数据
$.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
//如果第一个参数是boolean类型
//修正参数,将第二个参数作为target
if
(
typeof
target ===
"boolean"
) {
deep = target;
// skip the boolean and the target
target = arguments[ i ] || {};
//i++是为了后续 i === length的判断
i++;
}
// Handle case when target is a string or something (possible in deep copy)
//如果目标既不是对象也不是方法(例如给基本类型扩展属性方法和属性不会报错但是是无用的)，修正target为 js对象
if
(
typeof
target !==
"object"
&& !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
//如果只有一个参数，修正对象为JQuery函数或JQuery对象
if
( i === length ) {
target =
this
;
//修正target所在位置,后面的都是要添加给target的对象
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
//如果target和copy是同一个对象，略过，防止自己的属性引用了本身对象导致的循环引用,以致GC无法回收
if
( target === copy ) {
continue
;
}
// Recurse if we're merging plain objects or arrays
//如果是deep为true，并且要添加给target的copy为对象获数组
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;
};