jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN])jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象. 在jQuery库中，`jQuery.extend()` 和 `jQuery.fn.extend()` 是两种非常重要的方法，它们用于扩展和合并对象的属性。这两个方法在开发自定义插件或进行jQuery对象的定制时非常常见。 `jQuery.extend()` 用于合并一个或多个源对象（`object1, object2, ..., objectN`）的属性到目标对象（`target`）中。如果提供了`deep`参数，并且其值为`true`，则执行深度合并，即如果源对象和目标对象有嵌套的对象或数组，会递归地合并这些嵌套结构。例如： ```javascript var obj1 = {a: 1, b: {c: 2}}; var obj2 = {b: {d: 3}, e: 4}; jQuery.extend(true, obj1, obj2); console.log(obj1); // 输出：{a: 1, b: {c: 2, d: 3}, e: 4} ``` 这里，`obj1` 的 `b` 属性被 `obj2` 的 `b` 属性深度合并，而不是简单的覆盖。 `jQuery.fn.extend()` 方法则是用于向jQuery实例对象（`$`）添加方法。这些方法可以像其他内置的jQuery方法一样在选择器后的链式调用中使用。例如： ```javascript jQuery.fn.extend({ highlight: function() { this.css('background-color', 'yellow'); } }); $('p').highlight(); // 高亮所有段落 ``` 在这个例子中，我们创建了一个名为`highlight`的新方法，可以用于高亮jQuery选择器匹配的元素。 在实现中，`jQuery.extend()` 和 `jQuery.fn.extend()` 的内部工作原理类似，它们都会处理不定数量的参数，并进行属性的合并。在处理过程中，有一些关键细节需要注意，比如： - 如果第一个参数是布尔值，那么它将被用作`deep`标志，而目标对象将被设置为第二个参数。 - 如果目标对象`target`不是对象或函数，那么会创建一个新的空对象`targeted`作为目标。 - 当没有传入额外的对象时，`this`（即`jQuery`或`jQuery.fn`）将作为目标对象。 在合并过程中，对于深度合并的情况，如果源对象和目标对象有相同的属性，但引用相同，为了避免死循环，将不会进行覆盖。此外，对于非深度合并，如果源对象的属性值不是`undefined`，则会直接覆盖目标对象的同名属性。 `jQuery.extend()` 和 `jQuery.fn.extend()` 是jQuery库中的核心工具，它们使得我们可以方便地扩展jQuery的功能和自定义行为，以满足特定项目的需求。理解这两个方法的工作原理，对于深入理解和使用jQuery至关重要。