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

时间：2023-03-08 21:26:48

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. [LeetCode] Find Peak Element 求数组的局部峰值

    A peak element is an element that is greater than its neighbors. Given an input array where num[i] ≠ ...

  2. QinQ

    7.3.1 QinQ技术诞生的背景 --<华为交换机学习指南> QinQ最初主要是为扩展VLAN ID空间而产生的,但随着城域以太网的发展以及运营商精细化运作的要求,QinQ的双层标签又有 ...

  3. redis配置文件详解

    基于redis2.4版本的配置文件. # 注意单位问题:当需要设置内存大小的时候,可以使用类似1k.5GB.4M这样的常见格式:## 1k => 1000 bytes# 1kb => 10 ...

  4. 基于centos的lnmp搭建

    部署lnmp环境 安装配置mariadb配置php配置phpmyadmin配置php-fpm配置nginx配置测试 LNMP(linux,nginx,mariadb,php)部署,以下默认在root权 ...

  5. Sprng ecache

    Ehcache是一种广泛使用的开源java分布式缓存,它具有内存和磁盘存储,缓存加载器,缓存扩展,缓存异常处理程序,一个gzip缓存servlet过滤器,支持REST和SOAP api等特点. 主要的 ...

  6. 滤镜 filter：gray 变灰色

    .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); ...

  7. AC自动机 HDU 2896

    n个字串 m个母串 字串在母串中出现几次 #include<stdio.h> #include<algorithm> #include<string.h> #inc ...

  8. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

  9. html5+css+div随时笔记

    首先给头部文件引用格式 <link href="<%=basePath%>temp/public/css/style.css" rel="stylesh ...

  10. Autofac 依赖注入

    介绍 Autofac是一款IOC框架,很轻量级性能非常高,自动注入很给力. NuGet Autofac:Autofac控制反转容器核心 Autofac.MVC5:提供IDependencyResolv ...

相关文章