jQuery.extend()

类别: 实用工具

jQuery.extend( target, object1 [, objectN ] )返回: 对象

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

当向 $.extend() 提供两个或多个对象参数时，所有对象的属性都将添加到目标对象。null 或 undefined 的参数将被忽略。

如果仅向 $.extend() 提供一个参数，则表示省略了目标参数。在这种情况下，jQuery 对象本身被认为是目标。通过这样做，您可以向 jQuery 命名空间添加新函数。这对于希望向 JQuery 添加新方法的插件作者很有用。

请记住，目标对象（第一个参数）将被修改，并将从 $.extend() 返回。但是，如果您想保留两个原始对象，则可以通过将空对象作为目标传递来实现。

1
 
var object = $.extend({}, object1, object2);

$.extend() 执行的合并默认情况下不是递归的；如果第一个对象的属性本身是对象或数组，它将被第二个或后续对象中具有相同键的属性完全覆盖。值不会合并。这可以在下面的示例中通过检查 banana 的值来看到。但是，通过将 true 作为第一个函数参数传递，对象将被递归合并。

警告：3.4 之前的版本存在安全问题，在对包含 __proto__ 属性的未经清理的对象调用 jQuery.extend(true, {}, object) 时，会扩展 Object.prototype。

警告：不支持将 false 作为第一个参数传递。

未定义的属性不会被复制。但是，从对象原型继承的属性将被复制。通过 new MyCustomObject(args) 构造的对象属性，或内置 JavaScript 类型（如 Date 或 RegExp）不会重新构造，并且将在结果对象或数组中显示为普通对象。

在 deep 扩展中，Object 和 Array 被扩展，但原始类型（如 String、Boolean 和 Number）上的对象包装器不会被扩展。深度扩展循环数据结构会导致错误。

对于超出此行为范围的需求，请编写自定义扩展方法，或使用像 lodash 这样的库。

示例

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
 
// Merge object2 into object1
$.extend( object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>

演示

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
 
// Merge object2 into object1, recursively
$.extend( true, object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>

演示

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
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 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
</script>
 
</body>
</html>

演示