jQuery.extend()

类别：实用工具

jQuery.extend( target [, object1 ] [, objectN ] )返回类型：Object

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

  • 增补版本：1.0jQuery.extend( target [, object1 ] [, objectN ] )

    • target
      类型：Object
      一个对象，如果传入了额外的对象，它将接受新的属性，如果它是唯一的参数，则将扩展jQuery的命名空间。
    • object1
      类型：Object
      一个对象，包含要合并入的额外的属性。
    • objectN
      类型：Object
      额外的对象，包含要合并入的属性。

  • 增补版本：1.1.4jQuery.extend( [deep ], target, object1 [, objectN ] )

    • deep
      类型：Boolean
      如果是true，合并变成递归（又称“深复制”）。不支持对此参数传入false。
    • target
      类型：Object
      要扩展的对象。它将接受新属性。
    • object1
      类型：Object
      一个对象，包含要合并入的额外的属性。
    • objectN
      类型：Object
      额外的对象，包含要合并入的属性。

如果向$.extend()提供了两个或多个对象参数，来自所有对象的属性将添加到目标对象。参数是null或undefined会被忽略。

如果只有一个参数提供给$.extend()，这意味着目标参数被省略了。在这种情况下，jQuery对象本身被假定为目标。这样做，你可以将新函数添加到jQuery命名空间。这对想要对jQuery添加新方法的插件作者来说很有用。

请记住，目标对象（第一个参数）会被修改，也会从$.extend()中返回。然而，如果你想保留两个原始对象，你可以传入一个空对象作为目标：

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

默认情况下，由$.extend()实施的合并不会递归；如果第一个对象的属性本身是一个对象或数组，它会被第二个或后续的对象的相同键名的属性完全覆盖。该值没有合并。可以在下面的示例中看到它，检查香蕉的值。然而，通过为第一个函数参数传入true，对象会被递归合并。

警告：不支持对第一个参数传入false。

不会复制undefined值。然而，继承自对象的原型的属性将被复制入。如果属性是通过new MyCustomObject(args)或内建JavaScript类型，譬如Date或RegExp对象创建的对象，不会被重构，将呈现为输出的对象或数组中的扁平的对象。

如果做了deep扩展，对象和数组都会被扩展，但是在原始类型上封装的对象，譬如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.jquery.com/jquery-1.10.2.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.jquery.com/jquery-1.10.2.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.jquery.com/jquery-1.10.2.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>

演示：