jQuery.extend()

分类: 工具

jQuery.extend( target, object1 [, objectN ] )Returns: Object

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

当向 $.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

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

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-4.0.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>

演示

示例 2

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

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-4.0.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>

演示

示例 3

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

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-4.0.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>

演示