jquery - extend() 函数在 jQuery 中如何工作？

Question

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

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

它是如何工作的？

什么是extend()做什么？

Answer 1

多个参数

文档没有准确解释 extend 的工作原理，所以我进行了一些测试:

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