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

Posted 2023-05-09

【中文标题】jQuery 中的 extend() 函数是如何工作的？

【英文标题】：How does the extend() function work in jQuery?

【发布时间】：2011-05-30 13:10:02

【问题描述】：

我在插件中看到了这个：

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

它是如何工作的？

extend() 是做什么的？

【问题讨论】：

您可以在 jQuery 文档中阅读有关它的信息，但我想this 是一个更好的解释。

jQuery 有很好的文档。 api.jquery.com 只需在 Search jQuery 字段中输入方法名称即可。

我认为 Todd 想知道 jQuery.extend 是如何工作的，而不是如何使用它。例如，它是循环遍历每个属性以创建一个全新的对象，还是以某种很棒的方式使用原型继承。

【参考方案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

【讨论】：

所以如果 b.baz 是一个对象，比如 zed: 'dark' 而不是 2，并且你设置了 r.baz.zed = 'light'，那么 b.baz.zed 的值是多少？即属性是否通过引用复制或合并？

回答我自己的问题，b.baz.zed 将是light - 即通过引用合并值。见fiddle

精彩讲解，+1

我希望官方文档应该这么清楚。 +1

$.extend(true, object1, object2);和 $.extend(object1, object2);区别...

【参考方案2】：

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

Ex: $.extend(object1, object2);

现在object1包含object2的属性

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

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

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

【参考方案3】：

来自 jQuery 文档

合并两个或多个的内容 对象一起成第一个 对象。

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

【讨论】：

这个答案应该在评论中。

谢谢乔布斯！！

【参考方案4】：

extend() 在 jQuery 中是如何工作的？ [已解决]

jQuery 有深拷贝和浅拷贝。第一个布尔值决定它，真为深，假为光。

例如：

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 这是具有多层次对象的深拷贝（就像数组层次一样）

jQuery.extend(a,b,c) with a, b, c 是对象或数组。流程覆盖将是 b->a, c ->a (b overrite a, c override a ...) 这个函数将返回 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 override a, c override a ...) 。结果返回将是一个。

使用 a= 'p': 1。 jQuery.extend(a, 'p': 2,'p': 3,'p': 4,'p': 5) 将返回 a，并且 a = 'p': 6。传递给此函数的参数数量是无限的。

【讨论】：

来自docks“警告：不支持为第一个参数传递false。”

【参考方案5】：

目的是扩展现有对象。例如如果我们有一个模板对象，并且我们想通过添加更多属性或覆盖现有属性来扩展它，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表示我们需要深拷贝还是浅拷贝

【讨论】：

什么是深拷贝还是浅拷贝？

【参考方案6】：

正是这样做的

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

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

【讨论】：

单行答案和文档链接作为答案没有多大用处，应留在评论中。