Jquery $.extend的重载方法详述

1 $.extend(result,item1,item2,item3,........)  -这个重载方法主要是用来合并，将所有的参数都合并到result中,并返回result，但是这样会破坏result的结构.代码展示：

        $(function () {            var p1 = { name: "张三", age: 16, sex: "男" };            var p2 = { name: "李四", age: 22, sex: "女" };            var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm" };            $.extend(p2, p3);            var tr = "<tr><td>" + p2.name + "</td><td>" + p2.age + "</td><td>" + p2.sex + "</td><td>" + p2.height + "</td></tr>";            $('.table').append(tr);        });

结果为:王五 23 gay 175cm   从结果进行分析两者的结果进行了合并,相同属性结果为最后一个参数的属性值为准。不相同的进行合并,最后返回的p2结果集结构上(多了heigth属性)发生了改变。

2.$.extend({},result,item1,item2,item3,........)    -这个方法将合并之后的结果集存到了{}中,并返回，且不会破坏进行合并的两个集合的结构。

        $(function () {
            var p2 = { name: "李四", age: 22, sex: "女" };
            var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm" };
            var result=$.extend({},p2, p3);
            var tr = "<tr><td>" + result.name + "</td><td>" + result.age + "</td><td>" + result.sex + "</td><td>" + result.height + "</td></tr>";
            $('.table').append(tr);
        });

结果为:王五 23 gay 175cm    从结果进行分析两者的结果进行了合并,相同属性结果为最后一个参数的属性值为准。不相同的进行合并,最终生成{}集合,此时的p2结果集结构并没有发生改变。

观察上面的结果发现

3.$.extend(bool,{},result,item1,item2,item3,........)  -这种情况常用于嵌套集合

当bool值为true时,两个集合之间的合并为深合并,因为p1，p2两个集合中的adress属性相同,但是adress还拥有子属性(而且两个集合的adress属性的子属性还不相同所以里面的子属性也按照外面的属性合并方法进行合并)这样的合并叫做深度合并  -前提是当bool值为true时。

        $(function () {
            var p2 = { name: "李四", age: 22, sex: "女",address:{ provice:"浙江",city:"湖州"} };
            var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm",address:{city:"杭州"} };
            var result=$.extend(true,{},p2, p3);
            var tr = "<tr><td>" + result.name + "</td><td>" + result.age + "</td><td>" + result.sex + "</td><td>" + result.height + "</td><td>" + result.address.provice + "</td><td>" + result.address.city + "</td></tr>";
           $('.table').append(tr);
        });

结果为:王五 23 gay 175cm  浙江  杭州

当bool值为false时,两个集合之间的合并叫做浅合并,因为p2,p3两个集合中的adress属性相同,但是此时的adress还用子属性(而且两个adress属性的子属性还不相同)因为bool值为false，所有合并只进行到adress属性级别,他的子属性不进行合并。代码如下：

        $(function () {
            var p2 = { name: "李四", age: 22, sex: "女",address:{ provice:"浙江",city:"湖州"} };
            var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm",address:{city:"杭州"} };
            var result=$.extend(false,{},p2, p3);
            var tr = "<tr><td>" + result.name + "</td><td>" + result.age + "</td><td>" + result.sex + "</td><td>" + result.height + "</td><td>" + result.address.provice + "</td><td>" + result.address.city + "</td></tr>";
           $('.table').append(tr);
        });

结果如下:王五 23 gay 175cm  undefined 杭州  -即p3集合的adress属性直接吧p2集合的adress属性覆盖掉了。