jquery extend

1、方法介绍

jQuery 的 API 手册中，extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上， 但在 jQuery 内部代码实现的是相同的，只是功能各不相同。

2、合并对象

首先，我先来介绍一下 extend 函数在 合并对象 方面的用法。

jQuery.extend(target [, object1] [, objectN])

合并 object1 ... objectN 到 target 对象，如果只有一个参数，则该 target 对象会被合并到 jQuery 对象中。

var obj1 = {
  name: 'Tom',
  age: 21
}

var obj2 = {
  name: 'Jerry',
  sex: 'boy'
}

$.extend(obj1, obj2) // {name: "Jerry", age: 21, sex: "boy"}

obj1 // {name: "Jerry", age: 21, sex: "boy"}
obj2 // {name: "Jerry", sex: "boy"}

上述代码展示的是将 obj2 对象合并到 obj1 对象中，这种方法会 改变 obj1 对象的结构。 如果你 不想改变 合并目标对象的结构，你可以这么做。

var obj1 = {
  name: 'Tom',
  age: 21
}

var obj2 = {
  name: 'Jerry',
  sex: 'boy'
}

$.extend({}, obj1, obj2) // { name: "Jerry", age: 21, sex: "boy" }

obj1 // { name: "Tom", age: 21 }
obj2 // { name: "Jerry", sex: "boy" }

3、深浅拷贝

jQuery.extend([deep], target, object1 [, objectN])

和上面的讲述的不同的是，该方法多了一个类型为 boolean 的 [deep] 传参，当其为 true 时， 将 object1 , objectN 深度复制 后合并到 target 中。

首先，我们理解一下什么叫做 深度复制 。看看其和 浅度复制 有什么区别。

var obj1 = {
  name: 'John',
  location: {
    city: 'Boston',
    county: 'USA'
  }
}

var obj2 = {
  last: 'Resig',
  location: {
    state: 'MA',
    county: 'China'
  }
}

$.extend(false, {}, obj1, obj2) // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}

$.extend(true, {}, obj1, obj2) // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}

由此可见，执行 深度复制 会递归遍历每个对象中含有复杂对象（如：数组、函数、json 对象等）的属性值进行复制， 而且 浅度复制便不会这么做。