jquery源码分析之扩展函数 extend, $.extend

声明：本文为斯人原创，全部为作者一一分析得之，有不对的地方望赐教。

欢迎转载，转载请注明出处 。

本文地址：http://imsiren.com/archives/525

好久没写jquery源码的内容了..

jquery的发展有很大因素是因为它非常易于扩展,究其原因就得益于
extend函数

该函数是一个扩展函数…说是一个扩展函数,其实就是一个浅拷贝和深拷贝的函数而已.

该函数 确实很强大,而且写的很优雅..

先来看看用法,有三种用法.

1、$.extend(dest,src1,src2,src3…);

2、$.extend(src)

3、$.extend(boolean,dest,src1,src2,src3…)

意思就是将 src1,src2,src3合并到dest对象中..

特别说一下第三种,第一个参数的意义就在于 是否对src1,src2等进行深copy.

那么什么是深copy呢?

var ret=$.extend(true,{},

{name:”siren”,about:{age:24,country:”beijing”}},

{from:”hebei”,birthday:{year:1988,month:02}}

);

如果第一个值为true,那么就对src1,src2进行深copy.

这个时候ret返回值就是 ret={name:”siren”,about:{age:24,country:”beijing”},from:”hebei”,birthday:{year:1988,month:02}};

发现 连 about和birthday的属性都一起copy到了dest里面.这就是深copy.

那么看看源码

o.extend = o.fn.extend = function() {
var J = arguments[0] || {},
H = 1,
I = arguments.length,
E = false,
G;
if (typeof J === "boolean") {
E = J;
J = arguments[1] || {};
H = 2
}
if (typeof J !== "object" && !o.isFunction(J)) {
J = {}
}
if (I == H) {
J = this; --H
}
for (; H < I; H++) {
if ((G = arguments[H]) != null) {
for (var F in G) {
var K = J[F],
L = G[F];
if (J === L) {
continue
}
if (E && L && typeof L === "object" && !L.nodeType) {
J[F] = o.extend(E, K || (L.length != null ? [] : {}), L)
} else {
if (L !== g) {
J[F] = L
}
}
}
}
}
return J
};

这是方法的定义部分.

我们逐行分析.

第2行 获取 extend传递进来的第一个参数..如果没有 初始化为一个对象.

4行获取参数的个数.

7行:如果第一个参数传递过来的是一个bool类型,这个时候用法就是我们前面提到的第三种.

12-14行:是一种规定,第一个参数要么是bool类型 要么是obj类型.当然在js里 obj类型也包括函数.

18-34行:进行复制.变量G是一个临时变量保存当前src的值.

比如执行 $.extend({},{a:10}); G就等于{a:10}

26-27行:如果进行深复制,src的属性也是一个对象并且不是一个element对象…这个时候再调用o.extend 递归进行复制.

否则

29-31行:L!==g. g是哪儿定义的?没定义 所以它等于undefined..

J[F] = L; F等于属性名称..L等于值.J就等于我们的dest.

怎么样明白了没有..这样我们也可以写出很牛的继承函数了哦..

我先来个简单的.

(function(){
var s={};
s.extend=function(){
var a=arguments[0]||{},
e=false, //是否是深拷贝
h=0,  //参数个数
j=arguments[1],
n=arguments.length,g;
if(typeof arguments[0]==='boolean'){
e=arguments[0];
h=1;
};
for(;h<n;h++){
g=arguments[h];
if(typeof g !=null){
for(var t in g){
if(e && g[t] && typeof g[t]=='object' && !g[t].nodeType){//深拷贝
o.extend(e,(j||{}),g[t]);
}else{
if(g[t]!=undefined){
j[t]=g[t]; //拷贝
}
}
}
}
}
return j;
};
var c=s.extend({a:10},{name:'siren',t:{age:20,sex:1}})
console.log(c)
})()

怎么样..是不是非常简单??

^.^

原文出处:http://imsiren.com/archives/525