jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

jQuery.extend 与 jQuery.fn.extend 是 jQuery 中的两个非常重要的方法，也是比较容易混淆的。在正确使用这两个方法之前，首先要了解它们的用法和区别。

jQuery.extend

jQuery.extend 可以用来将多个对象合并成一个对象，并且支持深度合并。其基本语法为：

jQuery.extend([deep], target, object1, [objectN]);

• deep: 可选参数，表示是否进行深度合并，默认为浅合并。
• target: 必选参数，表示合并的目标对象。
• object: 可选参数，表示要合并的源对象。

示例一：深度合并对象

// 定义两个对象
var obj1 = {
    name: 'Tom',
    age: 18,
    address: {
        city: 'Beijing',
        district: 'Haidian'
    }
};
var obj2 = {
    age: 20,
    height: 180,
    address: {
        district: 'Chaoyang',
        street: 'CBD'
    }
};

// 合并两个对象
var result = jQuery.extend(true, {}, obj1, obj2);
console.log(result);

上述例子通过使用 jQuery.extend 以及 deep 参数深度合并两个对象，并且传入空对象作为合并后的目标对象。结果显示如下：

{
    name: 'Tom',
    age: 20,
    address: {
        city: 'Beijing',
        district: 'Chaoyang',
        street: 'CBD'
    },
    height: 180
}

jQuery.fn.extend

jQuery.fn.extend 可以用来扩展 jQuery 对象的方法，可以将自定义的方法添加到 jQuery 对象中。其基本语法为：

jQuery.fn.extend(object);

其中，object 表示要扩展的方法集合，可以是一个对象，也可以是一个函数。

示例二：自定义 jQuery 插件

// jQuery 插件构造函数
function MyPlugin(el, options){
    this.$element = $(el);
    this.options = $.extend({}, MyPlugin.defaults, options);
    this.init();
}

// 插件默认参数
MyPlugin.defaults = {
    color: 'red',
    padding: 10
};

// 插件方法
MyPlugin.prototype.init = function(){
    this.$element.css({
        color: this.options.color,
        padding: this.options.padding
    });
};

// 扩展 jQuery 对象
$.fn.myPlugin = function(options){
    return this.each(function(){
        new MyPlugin(this, options);
    });
};

// 使用插件
$('p').myPlugin({
    color: 'green',
    padding: 20
});

上述代码定义了一个 MyPlugin 函数，用于构造自定义的 jQuery 插件。通过 $.fn.extend 扩展了 jQuery 对象，将自定义插件添加到 $.fn 对象中。最后，通过 $('p').myPlugin 调用自定义插件，并自定义了插件的参数。

区别

• jQuery.extend 用于合并对象，作为 jQuery 的工具方法。
• jQuery.fn.extend 用于扩展 jQuery 对象本身，常用于编写插件。

简单来说，jQuery.extend 是一个工具方法，用于合并对象；jQuery.fn.extend 是一个扩展方法，用于扩展 jQuery 对象。

综上所述，两个方法的用途和作用不同，需要根据具体情况进行选择。同时，也需要注意两个方法名称之间的区别，以免误用导致问题的出现。