一、$.extend是什么？
$.extend 是 jQuery 中的一个函数，它可以将多个对象合并成一个对象，同时也可以将多个数组合并成一个数组。$.extend 有两个参数：第一个参数表示目标对象，第二个参数表示源对象。$.extend 会将源对象的所有属性和方法都复制到目标对象中，如果有属性名相同，那么源对象中的属性值会覆盖目标对象中的属性值。
<script>
var targetObj = {
name: "John",
age: 25
};
var sourceObj = {
age: 30,
address: "Beijing"
};
$.extend(targetObj, sourceObj);
console.log(targetObj); // {name: "John", age: 30, address: "Beijing"}
</script>
上面的代码演示了 $.extend 函数的基本用法，它将源对象 sourceObj 的所有属性和方法复制到目标对象 targetObj 中，同时将源对象中的 "age" 属性的值覆盖了目标对象中的 "age" 属性的值。
二、$.extend 的扩展用法
1、$.extend 可以合并多个对象或数组。
除了接收两个参数之外，$.extend 还可以接收多个参数。如果传入多个源对象，那么它们将会被依次合并到目标对象中。
<script>
var targetObj = {
name: "John",
age: 25
};
var sourceObj1 = {
age: 30,
address: "Beijing"
};
var sourceObj2 = {
sex: "Male"
};
$.extend(targetObj, sourceObj1, sourceObj2);
console.log(targetObj); // {name: "John", age: 30, address: "Beijing", sex: "Male"}
</script>
上面的代码演示了 $.extend 函数接收多个源对象的用法，它将多个源对象依次合并到目标对象中。
2、$.extend 可以合并深层次的对象。
$.extend 可以合并深层次的对象，就是说，如果源对象的某个属性值还是一个对象，那么它将会进行递归合并，不断将里面的属性和方法复制到目标对象中。
<script>
var targetObj = {
name: "John",
age: 25,
info: {
phone: "123456",
email: "john@example.com"
}
};
var sourceObj = {
age: 30,
info: {
phone: "654321",
address: "Beijing"
}
};
$.extend(true, targetObj, sourceObj);
console.log(targetObj);
/*
{
name: "John",
age: 30,
info: {
phone: "654321",
email: "john@example.com",
address: "Beijing"
}
}
*/
</script>
上面的代码演示了 $.extend 函数合并深层次对象的用法，第一个参数传入 true 表示开启深层次合并。源对象 sourceObj 和目标对象 targetObj 中都有一个属性名为 "info" 的对象，这个对象里面又有多个属性。$.extend 函数会递归将所有的这些属性都合并到目标对象中。
三、$.extend 的实际应用案例
1、使用 $.extend 来扩展插件的默认设置。
以轮播图插件为例，通常情况下，我们需要给插件传入一些配置参数，例如轮播图的宽度、高度、是否自动播放等等。插件在实现的时候可以定义一些默认的设置，用户可以根据需要修改这些设置。这时可以使用 $.extend 函数将用户传入的参数和默认参数合并起来，得到最终的配置。下面是一个简单的轮播图插件的代码。
<script>
$.fn.carousel = function(options) {
// 默认配置
var defaults = {
width: 500,
height: 300,
autoPlay: true,
interval: 3000
};
// 合并用户配置和默认配置
var settings = $.extend({}, defaults, options);
// 实现轮播图功能...
};
</script>
上面的代码中，首先定义了轮播图插件的默认配置，然后用 $.extend 函数合并用户配置和默认配置，得到最终的配置，最后在插件内部使用这个配置来渲染界面。
2、使用 $.extend 来合并多个 Ajax 请求的数据。
在实际开发中，我们往往需要从服务器获取多个不同的数据，然后将它们合并起来，最后进行渲染。这时可以使用 $.ajax 函数发送多个 Ajax 请求，然后将它们的结果用 $.extend 函数合并起来。
<script>
function getData1() {
return $.ajax({
url: "api/data1",
dataType: "json"
});
}
function getData2() {
return $.ajax({
url: "api/data2",
dataType: "json"
});
}
$.when(getData1(), getData2()).done(function(result1, result2) {
var data = $.extend({}, result1[0], result2[0]);
// 渲染数据...
});
</script>
上面的代码中，首先定义了两个 Ajax 请求函数 getData1 和 getData2，然后使用 $.when 函数将这两个请求包装成一个新的 Ajax 请求，这个请求会等到所有的请求都完成后执行回调函数。在回调函数中，使用 $.extend 函数将两个请求的结果合并成一个对象，并用这个对象进行渲染。
四、总结
$.extend 函数是 jQuery 中非常实用的一个函数，它可以合并多个对象或多个数组，也可以合并深层次的对象。在实际开发中，我们可以用它来扩展插件的默认配置，合并多个 Ajax 请求的结果等。熟练掌握 $.extend 函数的用法，可以大大提高我们的开发效率。
