这两个方法用的是相同的代码，一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例，对于基本用法举几个例子：

html代码如下：

<!doctype html>

<html>

   <head>

      <title></title>

        <script src='jquery-1.7.1.js'></script>

   </head>

   <body>

    <img src=''/>

   </body>

</html>

下面写js里面的用法：

合并两个普通对象

      //给两个普通对象合并属性

      var obj1={name:'Tom',age:22};

      var obj2={name:'Jack',height:180};

      console.log($.extend(obj1,obj2));  //Object {name: "Jack", age: 22, height: 180}

给jQuery对象添加属性或者方法

$.extend({hehe:function(){alert('hehe');}});

 $.hehe();  //alert('hehe')

这个用法很重要，是jQuery内部添加实例属性和方法以及原型属性和方法的实现方法也是编写jQuery插件的方法,下面是jQuery1.7.1中使用extend方法扩展自己的方法和属性

jQuery.extend({

    noConflict: function( deep ) {

        if ( window.$ === jQuery ) {

            window.$ = _$;

        }

        if ( deep && window.jQuery === jQuery ) {

            window.jQuery = _jQuery;

        }

        return jQuery;

    },

    // Is the DOM ready to be used? Set to true once it occurs.

    isReady: false,

    // A counter to track how many items to wait for before

    // the ready event fires. See #6781

    readyWait: 1,
    .....

在这个例子中只传入了一个对象参数，那么默认就把this当做待合并修改的对象

给jQuery对象实例添加属性或者方法

 //针对jQuery实例扩展合并

      console.log($('img').extend({'title':'img'}));//[img, img#img.img, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "img", title: "img", constructor: function…]

只合并不修改待合并对象

      var obj1={name:'Tom',age:22};

      var obj2={name:'Jack',height:180};

      console.log($.extend(obj1,obj2));   //Object {name: "Jack", age: 22, height: 180}

      console.log(obj1);                  //Object {name: "Jack", age: 22, height: 180}

默认情况下，待合并对象跟返回结果一样是被修改了的，如果仅仅想得到一个合并后的对象又不想破坏任何一个原来的对象可以使用此方法

  var obj1={name:'Tom',age:22};

  var obj2={name:'Jack',height:180};

  var empty={};

  console.log($.extend(empty,obj1,obj2));   //Object {name: "Jack", age: 22, height: 180}

  console.log(obj1);                  //Object {name: "Tom", age: 22}

使用则递归合并或者叫深度拷贝

 var obj1={name:'Tom',love:{drink:'milk',eat:'bread'}};

 var obj2={name:'Jack',love:{drink:'water',sport:'football'}};

 console.log(($.extend(false,obj1,obj2)).love);   //Object {drink: "water", sport: "football"}

 console.log(($.extend(true,obj1,obj2)).love);    //Object {drink: "water", eat: "bread", sport: "football"}

详细的使用方法可以看参考手册http://www.w3cschool.cc/manual/jquery/

下面来分析下1.7.1源码中是怎么实现的：

jQuery.extend = jQuery.fn.extend = function() {

    var options, name, src, copy, copyIsArray, clone,

        target = arguments[0] || {},

        i = 1,

        length = arguments.length,

        deep = false;

       ...

}

首先是定义了一组变量，因为参数个数不确定所以就直接调用arguments对象访问传递的参数

变量 options：指向某个源对象。
‰ ‰ 变量 name：表示某个源对象的某个属性名。
‰ ‰ 变量 src：表示目标对象的某个属性的原始值。
‰ ‰ 变量 copy：表示某个源对象的某个属性的值。
‰ ‰ 变量 copyIsArray：指示变量 copy 是否是数组。
‰ ‰ 变量 clone：表示深度复制时原始值的修正值。
‰ ‰ 变量 target：指向目标对象。
‰ ‰ 变量 i：表示源对象的起始下标。
‰ ‰ 变量 length：表示参数的个数，用于修正变量 target。
‰ ‰ 变量 deep：指示是否执行深度复制，默认为 false。

为了更好地了解代码实现这里以上面举的一个例子作为演示观察源代码执行情况

      var obj1={name:'Tom',love:{drink:'milk',eat:'bread'}};

      var obj2={name:'Jack',love:{drink:'water',sport:'football'}};

      $.extend(true,obj1,obj2)

源码分析

// Handle a deep copy situation

    if ( typeof target === "boolean" ) {

        deep = target;

        target = arguments[1] || {};

        // skip the boolean and the target

        i = 2;

    }

判断是不是深度复制，如果第一个参数是布尔值那么就把第一个参数的值给deep,然后把第二个参数作为目标对象，如果第二个参数不存在就赋值为一个空对象，把源对象的下标改为2，在这个例子里面  是走这里的因为第一个参数是ture然后把deep变成了true ,target被修正成了第二个参数也即是obj1,源对象的起始下标为2就是从第三个开始作为源对象也就是本例中的obj2

// Handle case when target is a string or something (possible in deep copy)

    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

        target = {};

    }

这里对target又进一步进行了处理对于非对象和函数的数据类型而言增加自定义属性是无效的比如字符串自能调用自带的方法和属性

// extend jQuery itself if only one argument is passed

    if ( length === i ) {

        target = this;

        --i;

    }

如果length属性等于i的值那就表示没有目标对象存在，正常情况下length应该是大于i的值的 ，那么这个时候就把this作为目标对象把i值减一实现length值大于i值（比i大1）

这个就是jQuery给自己扩展属性的方法的实现原理，只要不传入目标对象就可以啦

两种可能的情况：$.extend(obj)    或者  $.extend(false/true,obj)；

    for ( ; i < length; i++ ) {

        // Only deal with non-null/undefined values

        if ( (options = arguments[ i ]) != null ) {

            // Extend the base object

            for ( name in options ) {

                src = target[ name ];

                copy = options[ name ];

                // Prevent never-ending loop

                if ( target === copy ) {

                    continue;

                }

                // Recurse if we're merging plain objects or arrays

                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                    if ( copyIsArray ) {

                        copyIsArray = false;

                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {

                        clone = src && jQuery.isPlainObject(src) ? src : {};

                    }

                    // Never move original objects, clone them

                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values

                } else if ( copy !== undefined ) {

                    target[ name ] = copy;

                }

            }

        }

    }

这个部分就是此方法的核心了，从arguements对象的第i个下标值开始循环操作首先过滤掉源对象是null或者是undefined的情况可以看到其实

源对象不一定真的就是对像，也可以是其他类型的值比如字符串比如这样写：

console.log($.extend({'name':'tom'},'aa'));   //Object {0: "a", 1: "a", name: "tom"}

是不是感觉很奇怪啊？究竟是怎么实现的呢？下面接着看

过滤完之后开始进行for循环 src保存的是目标对象的某个键的值，copy属性保存的源对象的某个键的值，这两个键都是一样的

// Prevent never-ending loop

                if ( target === copy ) {

                    continue;

                }

如果源对象的某个属性值就是目标对象可能会造成死循环导致程序崩溃所以这里做了一个限制让其跳过此次循环例如：

var o = {};

o.n1 = o;

$.extend( true, o, { n2: o } );

// 抛出异常：

// Uncaught RangeError: Maximum call stack size exceeded

但是这样做也会冤枉一些正常的情况比如：

 var obj1={a:'a'}

 var obj2={a:obj1};

 console.log($.extend(obj1,obj2)); //Object {a: "a"}

这种情况也是满足源对象值等于目标对象的但是结果发现obj1的a的属性值并没有被修改，就是因为执行了continue，下面把源码的这段话注释掉在执行

Object {a: Object}

这个时候就是正常被修改了个人感觉这个地方需要改进；

接着就是一个if判断就是区分是不是进行深度复制的先不看深度复制的先看一般的

target[ name ] = copy;

很简单就是只要copy有值就直接复制给目标对象，目标对象有的就修改没有就增加，这样就实现了合并啦。

for循环之后在把新的目标对象返回，所以目标对象最后是被修改的，而且结果和返回的结果是一样的。

// Return the modified object

    return target;
};

下面再来说说深度复制了怎么去处理

首先保证deep是true,copy有值并且是对象或者数组（如果不是对象和数组深度复制也就无从谈起）然后再分数组和对象来处理，先来看数组的情况：

if ( copyIsArray ) {

         copyIsArray = false;

         clone = src && jQuery.isArray(src) ? src : [];

} else {

        clone = src && jQuery.isPlainObject(src) ? src : {};

}

如果是数组copyIsArray的值为真然后走里面的 把值改成false ，针对当前循环的源对象属性，目标对象可能有也可能没有，有的话判断一下是不是数组是的话就是原来的数组不变不是的话就让它变成一个数组，因为既然源对象的当前属性是数组最后目标元素也必须是数组。不是数组就是对象把目标对象当前属性改成对象。

    // Never move original objects, clone them

     target[ name ] = jQuery.extend( deep, clone, copy );

然后把源对象的当前属性值（是数组或对象）和已经被改造过的目标对象的当前属性进行递归合并最后返回的新的数组或者对象赋值给目标对象，最终实现了深度复制。

但是这里面还有一个比较奇怪的现象，比如这样操作：

      console.log($.extend({a:1},'aa')); //Object {0: "a", 1: "a", a: 1}

原来源对象不一定真的是对象e而且居然可以把字符串拆开跟目标对象合并，原来for...in循环是操作字符串的

      var str='aa';

      for(var name in str){

         console.log(name);

         console.log(str[name])

      }

这样也是可以的，会把字符串拆开按数字下标读取，但是在源码中

if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) )

是有数组和对象限制的，那么深度复制的时候是不是就没有效果了呢？

经过我测试深度复制也是可以的，因为在源码里面copy的值竟然变成了匿名函数函数

 alert(jQuery.isPlainObject(copy)); //true

至于为什么是函数笔者还没搞清楚留待以后解决吧！

jQuery.extend()方法和jQuery.fn.extend()方法源码分析的更多相关文章

  1. jQuery.extend()方法和jQuery.fn.extend()方法

    jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例, ...

  2. Java split方法源码分析

    Java split方法源码分析 public String[] split(CharSequence input [, int limit]) { int index = 0; // 指针 bool ...

  3. invalidate和requestLayout方法源码分析

    invalidate方法源码分析 在之前分析View的绘制流程中,最后都有调用一个叫invalidate的方法,这个方法是啥玩意?我们来看一下View类中invalidate系列方法的源码(ViewG ...

  4. Linq分组操作之GroupBy,GroupJoin扩展方法源码分析

    Linq分组操作之GroupBy,GroupJoin扩展方法源码分析 一. GroupBy 解释: 根据指定的键选择器函数对序列中的元素进行分组,并且从每个组及其键中创建结果值. 查询表达式: var ...

  5. jQuery实现DOM加载方法源码分析

    传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... }  但 ...

  6. jQuery.clean()方法源码分析（一）

    在jQuery 1.7.1中调用jQuery.clean()方法的地方有三处,第一次就是在我之前的随笔分析jQuery.buildFramgment()方法里面的,其实还是构造函数的一部分,在处理诸如 ...

  7. 【Java】NIO中Selector的select方法源码分析

    该篇博客的有些内容和在之前介绍过了,在这里再次涉及到的就不详细说了,如果有不理解请看[Java]NIO中Channel的注册源码分析, [Java]NIO中Selector的创建源码分析 Select ...

  8. jQuery1.9.1--attr,prop与val方法源码分析

    这里只介绍这几个方法的源码,这部分引用了一个技巧,钩子对象,用来做兼容fixed的对象,后面也有一些使用.钩子对象具体的兼容细节这里就不详解了. var nodeHook, boolHook, rcl ...

  9. ArrayList方法源码分析

    本文将从ArrayList类的存储结构.初始化.增删数据.扩容处理以及元素迭代等几个方面,分析该类常用方法的源码. 数据存储设计 该类用一个Object类型的数组存储容器的元素.对于容量为空的情况,提 ...

随机推荐

  1. 寻找表达式（dfs）

    题目来源:微策略2013年校园招聘笔试题 题目描述: 现在有一个序列123......N,其中N介于3和15之间,要求在序列之间加入+.-或者空格,使得该序列组成的数学表达式的运算结果为0. 输入: ...

  2. nodejs图片转换字节保存

    fs.readFile('上传图片路径', function(err, data) { if (err) { // 错误处理 return; } var base64str = new Buffer( ...

  3. Spark入门实战系列--6.SparkSQL（中）--深入了解SparkSQL运行计划及调优

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 1.1  运行环境说明 1.1.1 硬软件环境 线程,主频2.2G,10G内存 l  虚拟软 ...

  4. Nutch源码阅读进程5---updatedb

    看nutch的源码仿佛就是一场谍战片,而构成这精彩绝伦的谍战剧情的就是nutch的每一个从inject->generate->fetch->parse->update的环节,首 ...

  5. 检查点（Checkpoint）过程如何处理未提交的事务

    每次我讲解SQL Server之前,我都会先简单谈下当我们执行查询时,在SQL Server内部发生了什么.执行一个SELECT语句非常简单,但是执行DML语句更加复杂,因为SQL Server要修改 ...

  6. 主成分分析(PCA)的一种直观理解

    源自知乎的一个答案,网上很多关于PCA的文章,不过很多都只讲到了如何理解方差的投影,却很少有讲到为什么特征向量就是投影方向.本文从形象角度谈一谈,因为没有证明,所以不会严谨,但是应该能够帮助形象理解P ...

  7. SQL Server时间粒度系列----第2节日期、周时间粒度详解

    本文目录列表: 1.从MySQL提供的TO_DAYS和FROM_DAYS这对函数说起2.SQL Server日期时间粒度3.SQL Server周有关时间粒度 4.总结语 5.参考清单列表   从My ...

  8. Redis使用总结(2):Python接口

    安装redis-py sudo pip2 install redis 牛刀小试 redis连接实例是线程安全的,可以直接将redis连接实例设置为一个全局变量直接使用.如果需要另一个Redis实例(o ...

  9. C#中简单的继承和多态

    今天我们来聊一聊继承,说实话今天也是我第一次接触. 继承的概念是什么呢?就是一个类可以继承另一个类的属性和方法(成员) 继承是面向对象编程中的一个非常重要的特性. 好了,废话不多说,下面切入正题: 1 ...

  10. Win10 QQ五笔默认中文，InputMode默认中文

    Win10系统安装了QQ五笔后,InputMode默认英文,必须用鼠标点或者按 Ctrl+空格才能转换为中文.非常不方便. 即使将微软拼音默认为中文也不管用,解决方法如下: 设置后,无论你打开运行.记 ...