extend()函数在jQuery中是如何工作的?

ohtdti5x  于 2022-11-29  发布在  jQuery
关注(0)|答案(7)|浏览(124)

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

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

它是如何工作的?
extend()有什么作用?

yjghlzjz

yjghlzjz1#

多个参数

文档没有精确地解释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));

(The 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
qco9c6ql

qco9c6ql2#

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

Ex: $.extend(object1, object2);

现在对象1包含对象2的属性
如果我们想合并两个对象,那么我们需要在第一个参数中传递空对象

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

现在,newObject同时包含object 1和object 2的属性

beq87vna

beq87vna3#

来自jQuery文档
将两个或多个对象的内容合并到第一个对象中。

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

k5ifujac

k5ifujac4#

extend()在jQuery中如何工作?[已解决]
jQuery有深度拷贝和轻度拷贝。第一个布尔值决定它,深度拷贝为true,轻度拷贝为false。
例如:

  • 如果您的查询是空的,请返回。{'a1':1}},{'a':{'a2':2}})

结果将是:'a':2}}因为这是轻抄,只是比较一级。

  • 如果是真的,则为{'a1':1}},{'a':{'a2':2}})

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

  • 扩展(a,B,c),其中a,b,c是对象或数组。流重写将是b-〉a,c -〉a(b重写a,c重写a...)此函数将返回a,a也会改变值。
    高级示例:
  • jQuery.extend(参数编号:1个)

如果你只传递了一个参数,jQuery将扩展它自己。console.log(jQuery ['number_param'])将输出1。

  • jQuery.extend(1,参数值:'2'});此示例不是追加jQuery本身。第一个参数必须是布尔值。在这种情况下,它将返回{'number_param':'2'}和jQuery未得到更新。

  • (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.扩展(a,{'p':2},{'p':3},{'p':4},{'p':5})将返回a,而a ={'p':6}。传递给此函数的参数数量不受限制。
x1c4d 1x指令集

qlzsbp2j

qlzsbp2j5#

其目的是扩展一个已有的对象,例如,如果我们有一个模板对象,我们想通过添加更多的属性或覆盖已有的属性来扩展它,jquery extend就很有用。

var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"

};
现在,如果我们想扩展它,$.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'});它将为我们提供输出,扩展carObjectTemplate并添加

{"color":"red"} property and overriding "model" property from "city" to "amaze"

第一个布尔参数true/false用于指示我们需要深层拷贝还是浅层拷贝

f8rj6qna

f8rj6qna6#

它就是这样做的

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

更多信息,请访问jQuery.extend()

6yoyoihd

6yoyoihd7#

合并两个对象,修改第一个对象。

第一个

递归合并两个对象,修改第一个对象。

第一次

合并默认值和选项,而不修改默认值。这是一种常见的插件开发模式。

第一个

相关问题