jQuery中extend()和fn.extend()方法详解

介绍

jQuery 提供了两个方法来扩展自己：extend() 和 fn.extend() 。这两个方法的使用方式和适用场景有一定的差异。本文将会详细介绍它们的使用方式和应用场景。

extend() 方法

extend() 方法是 jQuery 的一个工具方法，可以用于把一个或多个对象合并到第一个对象中。该方法的语法如下：

jQuery.extend(target, obj1, obj2, …, objN)

该方法接收一个或多个对象参数，第一个参数称为目标对象，后面的参数称为源对象。方法会把源对象的属性合并到目标对象中，并返回合并后的目标对象。

示例

const obj1 = { name: '张三', age: 18 };
const obj2 = { gender: 'male', address: '北京市' };
const obj3 = { name: '李四' };

const newObj = $.extend(obj1, obj2, obj3);

// newObj: { name: '李四', age: 18, gender: 'male', address: '北京市' }
// obj1: { name: '李四', age: 18, gender: 'male', address: '北京市' }

以上示例中，我们先定义了三个对象 obj1、obj2、obj3，然后使用 extend() 方法将它们合并到 obj1 对象中，最后返回合并后的对象。可以发现，返回的 newObj 对象中包含三个对象的所有属性。

fn.extend() 方法

fn.extend() 应该算是jQuery的插件扩展方法。它用于扩展 jQuery.fn 对象，从而添加新的方法到jQuery中，让 jQuery 实例能够访问和调用新的扩展方法。该方法的语法如下：

jQuery.fn.extend( obj )

该方法接收一个对象参数，对象中的方法将会被扩展到 jQuery.fn 对象上。通过这种方式扩展的方法，则可以被每一个 jQuery 对象使用，相当于添加了新的实例方法。

示例

下面是一个简单的示例，用于扩展 jQuery.fn 对象，添加一个新的实例方法 highlight()

$.fn.extend({
  highlight: function() {
    this.css('background-color', 'yellow');
  }
});

$('p').highlight();

以上示例中，我们通过 fn.extend() 扩展了一个新的实例方法 highlight()，然后通过 jQuery 对象 $('p') 调用该方法，将选中的所有段落背景色都设置为黄色。

结论

extend() 方法用于拷贝一个或多个对象的属性到目标对象中，返回合并后的对象。fn.extend() 方法用于扩展 jQuery.fn 对象，添加新的实例方法到 jQuery 中。

以上就是对 jQuery 中 extend() 和 fn.extend() 方法的详细介绍。