简述jQuery.extend 与 jQuery.fn.extend的区别？

参考回答

在jQuery中，$.extend() 和 $.fn.extend() 都用于将一个或多个对象的属性拷贝到目标对象中，但它们的作用对象和使用场景不同。

1. $.extend()：
   • $.extend() 是一个全局方法，用于将源对象的属性拷贝到目标对象。这个方法通常用于将多个对象合并成一个对象。可以用来扩展 jQuery 的功能，或者在 AJAX 请求、插件开发时合并配置选项。
   • $.extend() 也支持深拷贝，通过设置第一个参数为 true 来实现。
2. $.fn.extend()：
   • $.fn.extend() 是 jQuery 实例对象的方法，用于将扩展的属性和方法添加到 jQuery 实例对象（即 $() 返回的 jQuery 对象）上。这是 jQuery 中扩展插件功能的常用方法，通常用于给所有 jQuery 对象添加新的方法。

详细讲解与拓展

1. $.extend() 的作用和用法：

• $.extend() 是一个静态方法，主要用于扩展 jQuery 自身的功能，或者合并多个对象。
• 该方法可以将源对象的属性拷贝到目标对象，返回目标对象。若多个源对象有相同的属性，后面的源对象会覆盖前面的属性。
• 它的语法如下：

  $.extend(target, object1, object2, ...);
  

• 其中 target 是目标对象，后续的对象会将属性拷贝到 target。

  示例：

  var obj1 = { name: 'John' };
  var obj2 = { age: 30 };
  
  $.extend(obj1, obj2);
  
  console.log(obj1);  // 输出: { name: 'John', age: 30 }
  

• 深拷贝：通过设置第一个参数为 true，可以实现深拷贝：

  var obj1 = { name: 'John', address: { city: 'New York' } };
  var obj2 = { age: 30 };
  
  $.extend(true, obj1, obj2);  // 深拷贝，obj1 和 obj2 中的引用类型会被复制
  
  console.log(obj1);  // 输出: { name: 'John', address: { city: 'New York' }, age: 30 }
  

2. $.fn.extend() 的作用和用法：

• $.fn.extend() 是 jQuery 对象的扩展方法，用于给 jQuery 实例添加新的方法或属性。通常用于创建插件或自定义功能，使得所有的 jQuery 对象都能访问到这些方法。
• 该方法将扩展的属性或方法添加到 $.fn 对象上，$.fn 是所有 jQuery 对象的原型。
• 语法如下：

  $.fn.extend({
   methodName: function() {
     // 方法实现
   }
  });
  

  示例：

  $.fn.extend({
   greet: function() {
     return this.each(function() {
       alert('Hello, ' + $(this).text());
     });
   }
  });
  
  // 使用自定义的 greet 方法
  $('#myElement').greet();
  

• 通过上面的代码，greet() 方法被添加到了所有的 jQuery 对象上。你可以对任何选中的元素调用 greet() 方法，而该方法会对每个匹配的元素执行一个操作。

3. $.extend() 与 $.fn.extend() 的区别：

4. 具体使用场景：

• $.extend()：常用于合并配置对象，如合并默认设置与用户自定义设置，或将多个对象合并为一个新的对象。

  var defaultConfig = { width: 100, height: 200 };
  var userConfig = { height: 300 };
  
  var finalConfig = $.extend({}, defaultConfig, userConfig);
  console.log(finalConfig);  // 输出: { width: 100, height: 300 }
  

• $.fn.extend()：常用于扩展 jQuery 对象的功能，添加自定义的方法。例如创建一个插件，让所有选中的元素都能使用该方法。

  $.fn.extend({
  highlight: function() {
    this.css('background-color', 'yellow');
    return this;
  }
  });
  
  // 使用自定义的 highlight 方法
  $('#myElement').highlight();
  

总结：

• $.extend() 是一个全局方法，用于扩展普通对象或合并多个对象的属性，支持深拷贝。
• $.fn.extend() 是一个针对 jQuery 实例对象的方法，用于给 jQuery 对象添加新的方法或属性，通常用于插件开发。

帅地训练营会员

打赏 收藏 海报挣佣金 推广链接