小开

来自 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 扩展() :

从第一个参数提供的对象开始。
将第二个参数中的任何属性添加到它。如果属性已经存在于第一个参数中，则会覆盖该属性。第二个参数的对象没有改变。
使用任何后续参数重复上述操作。
返回第一个参数。

这对于将用户和默认选项-对象组合在一起以获得一组完整的选项非常有用:

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”是重写的有效值，但“ unDefinition”不是。你可以利用这个。

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

小开

如果我们传递两个对象，第二个对象属性添加到第一个对象/第一个参数

Ex: $.extend(object1, object2);

现在是 Object1包含 object2的属性

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

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

现在是 NewObject 同时包含 object1和 object2的属性。

小开

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

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 表示是否需要深拷贝或浅拷贝

小开

在 jQuery 中扩展()是如何工作的? [解决]

JQuery 有深拷贝和浅拷贝。第一个布尔值决定它，深拷贝为 true，浅拷贝为 false。

例如:

扩展(false，{‘ a’: {‘ a1’: 1}} ，{‘ a’: {‘ a2’: 2}})

结果将是: {‘ a’: {‘ a2’: 2}}因为这是轻拷贝，只要比较级别1。
Tended (true，{‘ a’: {‘ a1’: 1}} ，{‘ a’: {‘ a2’: 2}})

结果将是: {‘ a’: {‘ a1’: 1，‘ a2’: 2}}这是具有多个对象级别的深拷贝(就像数组级别一样)
扩展(a，b，c)和 a，b，c 是对象或数组。流覆盖将是 b-> a，c-> a (b 覆盖 a，c 覆盖 a...)这个函数也将返回 a 和一个 change 值。

高级例子:

扩展({‘ number _ param’: 1})

如果只传递一个 param，jQuery 将自我扩展。 console.log (jQuery [‘ number _ param’])将输出1。
扩展(1，{‘ number _ param’: ‘2’}) ; 此示例不附加 jQuery 本身。第一个参数必须是布尔型的。在这种情况下，它将返回{‘ number _ param’: ‘2’} ，而 jQuery 不会得到更新。
扩展(a，b，c，d，e，f) ; 合并顺序为, C-> a，d-> a，e-> a，f-> a (b 重写 a，c 重写 a...)。结果返回一个。

A = {‘ p’: 1}。 Ext(a，{‘ p’: 2} ，{‘ p’: 3} ，{‘ p’: 4} ，{‘ p’: 5})将返回 a，并且 a = {‘ p’: 6}。传递给这个函数的数字参数是无限的。

小开

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

var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};


$( "#object1" ).append( JSON.stringify( object1 ) );
$( "#object2" ).append( JSON.stringify( object2 ) );


// Merge object2 into object1
$.extend( object1, object2 );
 

// Assuming JSON.stringify - not available in IE<8
$( "#result" ).append( JSON.stringify( object1 ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h3>object1</h3>
<code id="object1"></code>
<h3>object2</h3>
<code id="object2"></code>
<h3>$.extend( object1, object2 )</h3>
<code id="result"></code>

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

var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};


$( "#object1" ).append( JSON.stringify( object1 ) );
$( "#object2" ).append( JSON.stringify( object2 ) );
 

// Merge object2 into object1, recursively
$.extend( true, object1, object2 );
 

// Assuming JSON.stringify - not available in IE<8
$( "#result" ).append( JSON.stringify( object1 ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h3>object1</h3>
<code id="object1"></code>
<h3>object2</h3>
<code id="object2"></code>
<h3>$.extend( true, object1, object2 )</h3>
<code id="result"></code>

合并默认值和选项，而不修改默认值。

var defaults = {
validate: false,
limit: 5,
name: "foo"
};
var options = {
validate: true,
name: "bar"
};


// Merge defaults and options, without modifying defaults
var settings = $.extend({}, defaults, options);


$("#defaults").append(JSON.stringify(defaults));
$("#options").append(JSON.stringify(options));
$("#settings").append(JSON.stringify(settings));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h3>defaults</h3>
<code id="defaults"></code>
<h3>options</h3>
<code id="options"></code>
<h3>$.extend( {}, defaults, options )</h3>
<code id="settings"></code>

在 jQuery 中扩展()函数是如何工作的？

多重参数

单参数

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

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

合并默认值和选项，而不修改默认值。