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

news/2024/7/10 22:56:20 标签: jquery, 扩展, function, object, null, c

cle class="baidu_pl">

cle_content" class="article_content clearfix">

content_views" class="htmledit_views">

color:initial; font-size:13px; vertical-align:baseline; color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; text-align:left; background-color:rgb(247,247,247)"> 声明：本文为斯人原创࿰c;全部为作者一一分析得之࿰c;有不对的地方望赐教。
欢迎转载࿰c;转载请注明出处。
本文地址： http://imsiren.com/archives/525

color:initial; font-size:13px; vertical-align:baseline; line-height:18px; color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; text-align:left; background-color:rgb(247,247,247)"> 好久没写class="tags" href="/tags/JQUERY.html" title=jquery>jquery源码的内容了..
color:initial; vertical-align:baseline">class="tags" href="/tags/JQUERY.html" title=jquery>jquery的发展有很大因素是因为它非常易于class="tags" href="/tags/KuoZhan.html" title=扩展>扩展,究其原因就得益于 extend函数
该函数是一个class="tags" href="/tags/KuoZhan.html" title=扩展>扩展函数…说是一个class="tags" href="/tags/KuoZhan.html" title=扩展>扩展函数,其实就是一个浅拷贝和深拷贝的函数而已.
该函数确实很强大,而且写的很优雅..
先来看看用法,有三种用法.
color:initial; vertical-align:baseline">1、$.extend(dest,src1,src2,src3…);
color:initial; vertical-align:baseline">2、$.extend(src)
color:initial; vertical-align:baseline">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}}
);color:initial; vertical-align:baseline">
如果第一个值为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.
那么看看源码

color:initial; font-size:13px; vertical-align:baseline; line-height:18px; color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; text-align:left; background-color:rgb(247,247,247)">

<code class="language-javascript">o.extend = o.fn.extend = class="tags" href="/tags/FUNCTION.html" title=function>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 !== "class="tags" href="/tags/OBJECT.html" title=object>object" && !o.isFunction(J)) {
            J = {}
        }
        if (I == H) {
            J = this; --H
        }
        for (; H < I; H++) {
            if ((G = arguments[H]) != class="tags" href="/tags/NULL.html" title=null>null) {
                for (var F in G) {
                    var K = J[F],
                    L = G[F];
                    if (J === L) {
                        continue
                    }
                    if (E && L && typeof L === "class="tags" href="/tags/OBJECT.html" title=object>object" && !L.nodeType) {
                        J[F] = o.extend(E, K || (L.length != class="tags" href="/tags/NULL.html" title=null>null ? [] : {}), L)
                    } else {
                        if (L !== g) {
                            J[F] = L
                        }
                    }
                }
            }
        }
        return J
    };code>

color:initial; font-size:13px; vertical-align:baseline; line-height:18px; color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; text-align:left; background-color:rgb(247,247,247)"> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">这是方法的定义部分.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">我们逐行分析.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">第2行获取 extend传递进来的第一个参数..如果没有初始化为一个对象.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">4行获取参数的个数.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">7行:如果第一个参数传递过来的是一个bool类型,这个时候用法就是我们前面提到的第三种.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">12-14行:是一种规定,第一个参数要么是bool类型要么是obj类型.当然在js里 obj类型也包括函数.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">18-34行:进行复制.变量G是一个临时变量保存当前src的值.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">比如执行 $.extend({},{a:10}); G就等于{a:10}
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">26-27行:如果进行深复制,src的属性也是一个对象并且不是一个element对象…这个时候再调用o.extend 递归进行复制.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">否则
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">29-31行:L!==g. g是哪儿定义的?没定义所以它等于undefined..
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">J[F] = L; F等于属性名称..L等于值.J就等于我们的dest.
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">怎么样明白了没有..这样我们也可以写出很牛的继承函数了哦..
color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)" /> color:rgb(51,51,51); font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:13px; line-height:18px; text-align:left; background-color:rgb(247,247,247)">我先来个简单的.

<code class="language-javascript">(class="tags" href="/tags/FUNCTION.html" title=function>function(){
    var s={};
    s.extend=class="tags" href="/tags/FUNCTION.html" title=function>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 !=class="tags" href="/tags/NULL.html" title=null>null){
                    for(var t in g){
                        if(e && g[t] && typeof g[t]=='class="tags" href="/tags/OBJECT.html" title=object>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)
})()code>