extend()如何在jQuery中工作?

时间:2010-12-24 23:43:32

标签: jquery jquery-plugins

我在插件中看到了这个:

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

它是如何运作的?

extend()做了什么?

6 个答案:

答案 0 :(得分:162)

多个参数

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

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

答案 1 :(得分:20)

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

Ex: $.extend(object1, object2);

现在 object1包含object2的属性

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

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

现在 newObject包含object1和object2的属性

答案 2 :(得分:10)

来自jQuery文档

  

合并两个或更多内容   对象一起进入第一个   对象

在插件上下文中:如果用户没有为该函数设置可选参数,则会使用默认值。

答案 3 :(得分:3)

extend()在jQuery中如何工作?的 [解决]

jQuery有深拷贝和轻量级拷贝。第一个布尔值决定它,对于光线为真,对于光线为真。

例如:

  • jQuery.extend(false,{'a':{'a1':1}},{'a':{'a2':2}})

    结果将是: {'a':{'a2':2}}因为这是轻量级副本,只需比较级别1.

    enter image description here

  • jQuery.extend(true,{'a':{'a1':1}},{'a':{'a2':2}})

    结果将是: {'a':{'a1':1,'a2':2}}这是具有多级对象的深层复制(就像数组级别一样)

    enter image description here

  • jQuery.extend(a,b,c),a,b,c是对象或数组。流重写将是b-> a,c - > a(b覆盖a,c覆盖a ...)此函数也将返回a和a也更改值。

高级示例:

  • jQuery.extend({'number_param':1})

    如果您只是通过一个参数。 jQuery将扩展自己。 console.log(jQuery ['number_param'])将输出1。

    enter image description here

  • jQuery.extend(1,{'number_param':'2'});这个例子不附加jQuery本身。第一个参数必须是布尔值。在这种情况下,它将返回{'number_param':'2'}并且jQuery不会更新。

    enter image description here

  • jQuery.extend(a,b,c,d,e,f);订单合并将是。 b - > a, c - > a,d - > a,e - > a,f - > a(b覆盖a,c覆盖...)。结果返回将是一个。

    a = {'p':1}。 jQuery.extend(a,{'p':2},{'p':3},{'p':4},{'p':5})将返回a和a = {'p': 6}。传递给此函数的数字参数是无限的。

    enter image description here

答案 4 :(得分:1)

jQuery文档中有一个完美的例子:.extend() method

答案 5 :(得分:0)

确实如此

  

描述:将两个或多个对象的内容合并到一起   第一个对象。

更多jQuery.extend()