jquery.extend函数详解

https://segmentfault.com/a/1190000004082170

方法介绍

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

先看看官方给出的解释：

jQuery.extendMerge the contents of two or more objects together into the first object. 把两个或者多个对象合并到第一个对象当中；

jQuery.fn.extendMerge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. 把对象挂载到 jQuery 的 prototype 上以扩展一个新的 jQuery实例方法。

虽然官方对jQuery.extend的扩展方法功能只字未提，但是它也同样具有扩展 jQuery类方法的功能。

合并对象

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

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

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

varobj1 = {name:'Tom',age:21}varobj2 = {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 对象的结构。如果你不想改变合并目标对象的结构，你可以这么做。

varobj1 = {name:'Tom',age:21}varobj2 = {name:'Jerry',sex:'boy'}$.extend({}, obj1, obj2);//{name:"Jerry",age:21,sex:"boy"}obj1//{name:"Tom",age:21}obj2//{name:"Jerry",sex:"boy"}

深浅拷贝

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对象等）的属性值进行复制，而且浅度复制便不会这么做。

方法扩展

上述的 extend 方法中的 target 参数是可以省略的。如果省略了，则该方法就只能传入一个 object 参数，该方法功能是将该 object 合并到调用 extend 方法的对象中。

我们通常会使用这种方式来对 jQuer进行一些方法上的扩展。