首页 > 代码库 > Jquery的扩展方法extend详解
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的属性值会将前者的值给完全覆盖。
Jquery的扩展方法extend详解