jQuery extend函数详解

时间：2014-05-07 14:26:24 收藏：0 阅读：358

一 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的时候，子对象不会合并，只是进行了替换。

jQuery extend函数详解,布布扣,bubuko.com