extend()如何在jQuery中工作？

Question

我在一个插件中看到了这个:

var options = $.extend(defaults, options); 

它是如何工作的？

怎么extend()办？

Answer 1

多个参数

文档在解释扩展如何工作方面不准确,所以我进行了一些测试:

var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz);
console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz);
console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz);
console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));

(该console.log函数适用于Firebug;如果您愿意,可将其替换为alert()或其他输出函数).

结果是:

A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true

通过这个我们可以看到jQuery.extend():

• 从第一个参数提供的对象开始.
• 在第二个参数中添加任何属性.如果该属性已存在于第一个参数中,则会被覆盖.第二个参数的对象保持不变.
• 使用任何后续参数重复上述操作.
• 返回第一个参数.

这对于将用户和默认选项对象组合在一起以获得一组完整选项非常有用:

function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  };
  var someOtherDefaultOptions = {
    baz: 3
  };

  var allOptions = jQuery.extend(
    defaultOptions,
    someOtherDefaultOptions,
    userOptions
  );
  doSomething(allOptions);
}

foo({foo:1, baz:1});

请注意,"null"是覆盖的有效值,但"undefined"不是.你也许可以利用它.

var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
jQuery.extend(a,b);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar);

结果是:

A: Foo=null Bar=a

单参数

如果只传递一个对象jQuery.extend(),则jQuery假定jQuery对象本身是"第一个"参数(即:要修改的对象),并且您的对象是"第二个"(即:要添加到第一个的对象) .所以:

console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );

结果是:

Before: undefined
After: 1

Answer 2

它将一个对象的内容合并到另一个对象.如果我们传递两个对象,则将第二个对象属性添加到第一个object/first参数

Ex: $.extend(object1, object2);

现在object1包含object2的属性

如果我们想要合并两个对象,那么我们需要在第一个参数中传递空对象

Ex: var newObject = $.extend({}, object1, object2);

现在newObject包含object1和object2的属性.

Answer 3

来自jQuery文档

将两个或多个对象的内容合并到第一个对象中.

在插件上下文中:如果用户未设置该函数的可选参数,则将使用默认值.

Answer 4

extend（）在jQuery中如何工作？[解决]

jQuery具有深层复制和浅层复制。第一个布尔值决定它，对于深度而言为true，对于光线而言为false。

例如：

• jQuery.extend（false，{'a'：{'a1'：1}}，{'a'：{'a2'：2}}）

  结果将是：{'a'：{'a2'：2}}，因为这是简单副本，只需比较级别1。

  

• jQuery.extend（true，{'a'：{'a1'：1}}，{'a'：{'a2'：2}}）

  结果将是：{'a'：{'a1'：1，'a2'：2}}这是具有多个对象级别的深层副本（就像数组的级别一样）

  

• 具有a，b，c的jQuery.extend（a，b，c）是对象或数组。流覆盖将是b-> a，c-> a（b覆盖a，c覆盖a ...），此函数将返回a并也更改值。

高级示例：

• jQuery.extend（{'number_param'：1}）

  万一您只传递一个参数。jQuery将扩展自身。console.log（jQuery ['number_param']）将输出1。

  

• jQuery.extend（1，{'number_param'：'2'}）; 此示例未附加jQuery本身。第一个参数必须为布尔值。在这种情况下，它将返回{'number_param'：'2'}并且jQuery不会更新。

  

• jQuery.extend（a，b，c，d，e，f）; 订单合并将为。b-> a，c-> a，d-> a，e-> a，f-> a（b覆盖a，c覆盖a ...）。结果返回为a。

  其中a = {'p'：1}。jQuery.extend（a，{'p'：2}，{'p'：3}，{'p'：4}，{'p'：5}）将返回a和a = {'p'： 6}。传递给该功能的参数数量是无限的。