extend()如何在jQuery中工作?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (45)

我在插件里看到了这个:

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

它是如何工作的?

extend()能做什么?

提问于
用户回答回答于

来自jQuery文档

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

在插件环境中:如果用户不为函数设置可选参数,则将使用默认值。

用户回答回答于

多个参数

这个文档在解释扩展工作方面不够精确,所以我做了一个小小的测试:

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

扫码关注云+社区

领取腾讯云代金券