Jquery的扩展方法extend详解

今天研究了下Jquery的扩展方法extend。

1.extend(obj,item1,item2,item3...);

这段代码的含义是将src1,scr2等所有项合并到obj对象中，但是同样存在一个问题，这样合并会修改到obj的整个结构。

2.var result = $.extend({},item1,item2,item3...);

这个方法巧妙地运用了extend的特性 将一个空对象与所有item合并，并通过返回值的形式获取到一个新的对象。如下所示：

var result = $.extend({},{name:"zx",age:21},{name:"clt",sex:"man"});

输出结果为{name:"clt",age:21,sex:"man"}，由此我们可以看出在合并中， 如果存在相同的属性名，则后者会覆盖前者。

3.接下来是我们通常在插件中会看到的，扩展jq类的静态方法。如下所示：

$.extend({say:function(){alert("hello");}});

这样就是将src合并到jquery的全局对象中，换句话说也就是扩展了整个jq类的静态方法，我们可以通过$.say()进行调用。

举一反三，既然可以扩展jq类，自然也能扩展我们的自定义对象。

例如：$.extend(obj,{say:function(){alert("hello");}});

我们可以自定义一个obj对象，然后扩展他的say方法，通过obj.say()调用。

4.$.fn.extend(say:function(){alert($(this).text());}})

在jq源码中，$.fn = $.prototype,也就是jq类的原型链，该方法将src合并到jquery的实例对象中去，需要一个实例化的jq对象才可以调用，如下所示：

通过$("#test").say()可以调用到扩展的say方法。

5.var result=$.extend( true or false, {},
{ name: "zx", location: {city: "上饶",county:"USA"} },
{ last: "clt", location: {state: "江西",county:"China"} } );

最后我们需要了解$.extend中的传参，第一个参数为ture or false，分别代表执行深拷贝 or 浅拷贝。结果如下所示：

{ name: "zx", location: {city: "上饶",county:"China",state:"江西"} ,last:"clt"}。

当传入false时，代表执行浅拷贝，结果如下所示：

{ name: "zx", location: {state: "江西",county:"China"} ,last:"clt"}。

通过观察结果，我们可以得到以下结论。当参数为ture时，即为深拷贝，当第一个对象的location与第二个location的值不一样时，前者会将后者中的值给覆盖，换而言之，当不同时，则会进行合并。

当参数为false时，子项location属性相同时，后者location的属性值会将前者的值给完全覆盖。