$.extend()和 $.fn.extend()

1 $.extend()

     jQuery.extend(): Merge the contents of two or moreobjects together into the first object.
----把两个或者更多的对象合并到第一个对象当中
     jQuery.extend(object):用于将一个或多个对象的内容合并到目标对象。该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。且该函数属于全局jQuery对象。

用法一:jQuery 1.0 新增该用法。

jQuery.extend(target [, object1 ] [, objectN... ] )
用法二:jQuery 1.1.4 新增该用法。

jQuery.extend([ deep ], target , object1 [, objectN... ] )
注意事项:
1、该函数复制的对象属性包括方法在内。此外,还会复制对象继承自原型中的属性(JS内置的对象除外)。
2、参数deep的默认值为false,可以明确指定该参数为true值,但不能明确指定为false值。简而言之,第一个参数不能为false值。
3、如果参数为null或undefined,则该参数将被忽略。
4、如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。

5、如果多个对象具有相同的属性,则后者会覆盖前者的属性值。

6、改函数的返回值为参数target代表的对象。
     jQuery中深度复制,是将除null,undefined,window对象,dom对象,通过继承创建的对象外的其它对象克隆后保存到target中;之所以排除部分对象,一是考虑性能,二是考虑复杂度(如dom、window对象,如果克隆复制,消耗过大,而通过继承实现的对象,复杂程度不可预知,因此也不进行深度复制);
     深度与非深度复制区别是,深度复制的对象中如果有复杂属性值(如数组、函数、json对象等),那将会递归属性值的复制,合并后的对象修改属性值不影响原对象
 

1.1 extend(result,item1,item2…..)

     这里这个方法主要用来合并,将所有的参数项都合并result中,并返回result,但是这样就会破坏result的结构。
 

1.2 extend({},item1,item2,……)

     用这个方法,可以将所得的结果全部合并在{}中,并返回,而且还不会破坏原有的项的结构。
     示例:
     Var item={name:”olive”,age:23};
     Var item1={name:”Momo”,sex:”gril”};
     Var result=$.extend({},item,item1);
     结果:Result={name:”Momo”,age:23,sex:”gril”};
     以上的结果表明extend方法将所有的项都合并到了{}中,但是,细心一点就会发现,其中item1中的name:“Momo” 将item中的name:“olive”给覆盖了,这是怎么回事?请接着往下看。
 

1.3 extend(bool,{},item1,item2….)

     Extend方法还有带bool型参数的重载。bool型参数为true表示深拷贝,为false时表示浅拷贝。具体可以通过一下示例来说明:
     示例:
     var item={name:“olive”,age:23,address{provice:”河南”,city:”郑州”}};
     var item1={sex:”girl”,address{city:”北京”}};
     var result=$.extend(true,item,item1);
     var result1=$.extend(false,item,item1);
     结果:
     Result={name:“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
     Result1={name:“olive”,age:23,sex:”gril”,address:{ city:”北京”}};
     以上结果说明,当参数为ture时,即为深拷贝,当子项item1中的子项有与item中的子项相同属性的值不一样时,item1中子项的值会将item子项中的值给覆盖,当子项item1的属性跟item中的属性不同时,会与item进行合并。当参数为false时,子项item1中的子项中与item中的子项属性相同时,item1中子项的属性值会将item中的值给完全覆盖。
 
1.4 $.extend(item)
     该方法是将item合并到Jquery的全局对象中去,相当于为Jquery全局对象添加了一个静态方法(对应这里的静态方法,当然还有实例方法,在后边有介绍)。
      示例:
      $.extend({SayHello:function(value){alert(“hello “+value);}});
      这样写过之后,就可以直接调用SayHello方法:
      $.SayHello(“Olive”);
      说明:该方法相当于为Jquery类添加了新的方法。
 
2 $.fn.extend(item)
     jQuery.fn.extend():Merge the contents of an object ontothe jQuery prototype to provide new jQuery instance methods.
----把对象挂载到jQuery的prototype对象上,用以扩展一个新的jQuery实例方法
     jQuery.fn.extend(object): 函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。
     jQuery.fn是jQuery的原型对象,其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。该函数属于jQuery的原型对象(jQuery.fn)。
    
      上边提到的$.extend(item)是为Jquery类添加了静态方法,那么这里的$.fn.extend(item)就是为每一个实例添加一个实例方法了。
     示例:
     $.fn.extend({hello:function(value){alert(“hello “+value);}});
      这样写过之后,在获取每一个示例之后,都可以调用该方法:
     $(“#id”).hello(“Olive”);

随机推荐

  1. android 自定义动画

    android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...

  2. H264编码技术

    H.264的目标应用涵盖了眼下大部分的视频服务,如有线电视远程监控.交互媒体.数字电视.视频会议.视频点播.流媒体服务等.H.264为解决不同应用中的网络传输的差异.定义了两层:视频编码层(VCL:V ...

  3. Java类和对象初始化

    类的生命周期: Java类的初始化: 本阶段负责为类变量赋正确的初始值.(类变量即静态变量) Java编译器把所有的类变量初始化语句和静态初始化器通通收集到<clinit>方法中,该方法只 ...

  4. kvstore之mongodb为存储介质

    配置config(连接mongo) mongo define('KVSTORE_STORAGE', 'base_kvstore_mongodb'); define('MONGODB_SERVER_CO ...

  5. NoClassDefFoundError与ClassNOtFoundException的区别

    NoClassDefFoundError是一个错误(Error),而ClassNOtFoundException是一个异常,在Java中对于错误和异常的处理是不同的,我们可以从异常中恢复程序但却不应该 ...

  6. oracle12 安装

    oracle    oracle orcl    orcl

  7. qScrollArean的使用

    1◆ qScrollArean的使用   qt designer 工具 有时会 卡死的   2◆ 展示效果   滚动条   3◆ 操作   4◆ 说明 qt designer会卡死的    

  8. Prometheus 操作符

    操作符 二元操作符 Prometheus的查询语言支持基本的逻辑运算和算术运算.对于两个瞬时向量, 匹配行为可以被改变. 算术二元运算符 在Prometheus系统中支持下面的二元算术操作符: + 加 ...

  9. 《Think Python》第15章学习笔记

    目录 <Think Python>第15章学习笔记 15.1 程序员定义的类型(Programmer-defined types) 15.2 属性(Attributes) 15.3 矩形( ...

  10. 使用typescript开发js代码提升代码维护性

    function test() { var gs = new Greeter('ss'); alert( gs.greet()); } window.onload = test; class Gree ...

上一篇:深入理解JavaScript中 fn() 和 return fn() 的区别


下一篇:FortiGate抓包 Sniffer