因为在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;
};