# jQuery.extend()

所属分类：工具类 英文文档：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，合并成为递归（又叫做深拷贝）。
  - target
    类型: Object
    对象扩展。这将接收新的属性。
  - object1
    类型: Object
    一个对象，它包含额外的属性合并到第一个参数.
  - objectN
    类型: Object
    包含额外的属性合并到第一个参数

当我们提供两个或多个对象给`$.extend()`，对象的所有属性都添加到目标对象（target参数）。

如果只有一个参数提供给`$.extend()`，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

请记住，目标对象（第一个参数）将被修改，并且将通过`$.extend()`返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

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

在默认情况下，通过`$.extend()`合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值，就可以了解这一点。然而，如果将 `true` 作为该函数的第一个参数，那么会在对象上进行递归的合并。

警告:不支持第一个参数传递 `false` 。

未定义的属性不会被复制。然而，从对象原型的继承属性将被复制。如果属性（Properties）是一个通过构造函数`new MyCustomObject(args)`定义的，或JavaScript中内置类型，如Date 或 RegExp，是不会重新创建的，并且将被当作普通的对象出在返回的对象或数组中。

若设置了 `deep` 参数，对象和数组也会被合并进来，但是对象包裹的原始类型，比如String, Boolean, 和 Number是不会被合并进来的。

若要满足其它不同于该行为的需求，编写自定义的扩展方法代替。

## 例子:

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

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 32 33 34 35 36 37 38 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.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); var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {  var arr = [];  $.each(obj, function(key, val) {    var next = key + ": ";    next += $.isPlainObject(val) ? printObj(val) : val;    arr.push( next );  });  return "{ " +  arr.join(", ") + " }";}; $("#log").append( printObj(object1) );</script> </body></html>

#### Demo:

#### Example: 采用递归方式合并两个对象，并修改第一个对象。

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 32 33 34 35 36 37 38 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.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); var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {  var arr = [];  $.each(obj, function(key, val) {    var next = key + ": ";    next += $.isPlainObject(val) ? printObj(val) : val;    arr.push( next );  });  return "{ " +  arr.join(", ") + " }";}; $("#log").append( printObj(object1) );</script> </body></html>

#### Demo:

#### Example: 合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。

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 32 33 34 35 |
    <!DOCTYPE html><html><head>  <script src="https://code.jquery.com/jquery-latest.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); var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {  var arr = [];  $.each(obj, function(key, val) {    var next = key + ": ";    next += $.isPlainObject(val) ? printObj(val) : val;    arr.push( next );  });  return "{ " +  arr.join(", ") + " }";};  $("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );$("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );$("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" ); </script> </body></html>

#### Demo: