jQuery extend函数详解

一 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函数详解