九、JS之$.extend()之深拷贝、浅拷贝-CFANZ编程社区

（1）$.extend()之浅拷贝

common.ajax = function(param) {
    var mergeParam = $.extend({
        timeout : 10000
    } , param , {
        complete : function(response) {
            alert("扩展的!");
            }
        }
    });
    $.ajax(mergeParam);
}

我们以对Ajax进行二次封装为例来进行讲解浅拷贝。
上述代码就是浅拷贝。mergeParam中有三个参数：timeout、param、complete，其中timeout和complete就是我们扩展的参数，而param就是我们调用Ajax方法传递进来的参数。

对于timeout而言，它在param前面，就代表，所用户调用Ajax方法时传递的参数param中有timeout参数，则会覆盖掉我们这里扩展的timeout，使用我们传递进来的timeout，比如：

common.ajax({
    timeout: 2000
});

那么就会覆盖掉“timeout : 10000”。反过来说，若用户调用Ajax方法时传递的参数param中没有有timeout参数，则会在用户调用的Ajax方法中加入“timeout: 2000”，比如下面：
用户调用：

common.ajax({
    url: ...,
    type : ...
});

实际效果：

common.ajax({
    url: ...,
    type : ...，
    timeout : 10000
});

而对于complete而言，它在param后面，则和timeout相反，若param中有complete方法，它会覆盖掉param中的方法，而采用我们这里扩展的complete方法，若param中没有complete方法，则会向param中添加complete方法。比如：
用户调用：

common.ajax({
    url: ...,
    type : ...
    complete : function(response){
        alter("用户调用的");
    }
});

实际效果：

common.ajax({
    url: ...,
    type : ...，
    complete : function(response){
        alter("扩展的");
    }
});

补充：显然，若用户调用的Ajax方法中有complete参数，却被我们覆盖掉了，这不是一个我们想要的效果，在这里我们可以做一个判断，若用户调用的Ajax方法中有complete参数，则使用用户的，否则使用这里的complete方法，具体判断代码如下：

if(param.complete && typeof param.complete === "function") {
                    param.complete();
                }

（2）$.extend()之深拷贝
$.extend()的深拷贝和$.extend()的浅拷贝，在方法调用上，深拷贝多了一个true参数：深拷贝 $.extend(true，{timeout}，param)。
光是方法调用上的区别明显不是我想讲的，真正的区别在于拷贝数据的方式不同，比如下面代码：

option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    }
};

若我们对option参数进行扩展，比如：

//深度拷贝
    $.extend(true,option,data);

此时若data如下：

grid: {
        left: '10%',
    }

那么最终得到的效果是：

option = {
    grid: {
        left: '10%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    }
};

从上面的例子我们可以看到，若是深度拷贝，它不再是简单的数据覆盖，而是深入到数据之中，只覆盖或者增加与它匹配的那一项，其它的参数，它都不管。