jQuery继承extend用法详解

概述

在 jQuery 中，我们常常会用到继承 extend 方法。继承是 JavaScript 对象中一个非常重要的功能。

继承的概念是指一个对象可以从另一个对象中继承属性和方法。在 JavaScript 中，我们可以使用原型链来实现对象之间的继承关系。jQuery 中的继承方法是通过在目标对象上扩展一个对象来实现的。

语法

$.extend(target, [object1], [object2], [objectN])

参数

• target: 目标对象，对该对象进行修改和扩展。
• object1, object2, ..., objectN: 可选参数，用来对目标对象进行扩展的对象。

要扩展单个对象，可以将该对象作为第二个参数传递。

$.extend({}, myObject);

要扩展多个对象，可以将它们作为多个参数传递。

$.extend({}, obj1, obj2);

用途

用于创建 jQuery 插件

通过 extend 方法，可以扩展 jQuery 对象的原型，从而添加新的方法。

$.fn.myPlugin = function() {
  // plugin code here
};

此时，就可以使用 $('selector').myPlugin() 来调用该插件了。

用于实现继承

通过 extend 方法，可以将一个对象的属性和方法继承到另一个对象中。

var child = $.extend({}, parent);

将 parent 对象的属性和方法继承到 child 对象中。

示例

示例一：继承默认参数

var options = {
  color: 'red',
  size: 'large'
};

var defaults = {
  color: 'blue',
  size: 'medium',
  weight: 'heavy'
};

var settings = $.extend({}, defaults, options);

console.log(settings.color); // 输出：red
console.log(settings.size);  // 输出：large
console.log(settings.weight); // 输出：heavy

在上述示例中，通过 extend 将 defaults 和 options 对象合并成一个新的 settings 对象。注意，由于 options 对象中也存在 color 和 size 属性，因此在合并时，options 对象的属性会覆盖 defaults 对象中同名的属性。

示例二：创建 jQuery 插件

$.fn.myPlugin = function(options) {
  var settings = $.extend({
    color: 'red',
    size: 'large',
    weight: 'heavy'
  }, options);

  return this.each(function() {
    $(this).css({
      color: settings.color,
      fontSize: settings.size,
      fontWeight: settings.weight
    });
  });
};

$('selector').myPlugin({
  color: 'blue',
  size: 'medium'
});

在上述示例中，我们创建了一个名为 myPlugin 的 jQuery 插件，并为该插件设置了默认参数。通过 extend 将传递的 options 参数与默认参数合并，从而得到最终的设置信息。最后，使用该设置信息修改元素的样式。