一 jQuery的扩展方法原型是
$.extend(dest,src1,src2,src3);
含义是将src1,src2,src3合并到dest中,返回值为合并后的dest,该方法合并后,dest的结构被修改.
<script>
var dest = {'type':'person'}
var src1 = {'name':'lisi','age':12}
var src2 = {'sex':'male'}
var src3 = {'class':'class 1'}
var result = $.extend(dest,src1,src2,src3);
console.log(result);
</script>
结果:Object { type="person", name="lisi", age=12, sex='male',class="class1"}
如果不想修改dest的结构,可以使用一个空对象({})代替
<script>
var dest = {'type':'person'}
var src1 = {'name':'lisi','age':12}
var src2 = {'sex':'male'}
var src3 = {'class':'class 1'}
var result = $.extend({},src1,src2,src3);
console.log(result);
</script>
二 省略dest参数
$.extend()方法原型中的dest参数是可以忽略的,如果忽略,则该方法只有一个src参数,而且是将src合并到调用extend方法的对象中去。
1 $.extend()方法将src合并到jquery的全局对象中去。
<script>
$.extend({
hello:function(){
alert('将src合并到jquery的全局对象中,调用方式为$.hello()');
}
})
$.hello();
</script>
2 $.fn.extend()该方法将src合并到jquery的实例对象中去.
<div id="div">test demo</div>
<script>
$.fn.extend({
hello:function(){
alert('将src合并到jquery的实例对象中,调用方式为$("#div").hello()');
}
})
$("#div").hello();
</script>
三 jquery的extend方法还有一个重载原型
extend(boolean,dest,src1,src2,src3);
第一个参数boolean代表是否进行深度拷贝,其余参数如上所述
var src1 = {name:'John',location:{city:'Bj',country:'China',sex:'Male'}};
var src2 = {name:'Lucy',location:{city:'NewYork',country:"USA"}};
var result = $.extend(true,{},src1,src2);
var result2 = $.extend(false,{},src1,src2);
result1 :
location Object { city="NewYork", country="USA", sex="Male"}
name"Lucy"
retuslt2:
locationObject { city="NewYork", country="USA"}
name"Lucy"
可以看到当bool值为true的时候,子对象也会合并,而当bool值为false的时候,子对象不会合并,只是进行了替换。