jQuery extend函数详解

一 jQuery的扩展方法原型是

$.extend(dest,src1,src2,src3);

含义是将src1,src2,src3合并到dest中,返回值为合并后的dest,该方法合并后,dest的结构被修改.

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

结果:Object { type="person", name="lisi", age=12, sex=‘male‘,class="class1"}

如果不想修改dest的结构,可以使用一个空对象({})代替

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

二 省略dest参数

$.extend()方法原型中的dest参数是可以忽略的,如果忽略,则该方法只有一个src参数,而且是将src合并到调用extend方法的对象中去。

1 $.extend()方法将src合并到jquery的全局对象中去。

jQuery extend函数详解
<script>
$.extend({
    hello:function(){
            alert(将src合并到jquery的全局对象中,调用方式为$.hello());    
         }
})
$.hello();
</script>
jQuery extend函数详解

2 $.fn.extend()该方法将src合并到jquery的实例对象中去.

jQuery extend函数详解
<div id="div">test demo</div>
<script>
$.fn.extend({
    hello:function(){
            alert(将src合并到jquery的实例对象中,调用方式为$("#div").hello());    
         }
})
$("#div").hello();
</script>
jQuery extend函数详解

三 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

jQuery extend函数详解

上一篇:Dreamweaver 添加 cakephp ctp后缀名


下一篇:C# 从服务器下载文件代码