这次分析的方法跟前面不同，虽然pushStack也是原型方法之一，但是我们几乎从不用在页面调用，在参考手册里面也没有这个方法的使用说明，但是这个方法还是非常重要的，在使用很多jQuery的其他方式都会隐式的调用此方法：

它为以下方法提供支持：
‰ ‰ jQuery 对象遍历：.eq()、.first()、.last()、.slice()、.map()。
‰ ‰ DOM 查找、过滤：.find()、.not()、.filter()、.closest()、.add()、.andSelf()。
‰ ‰ DOM 遍历： .parent()、.parents()、.parentsUntil()、.next()、.prev()、.nextAll()、.prevAll()、
.nextUnit()、.prevUnit()、.siblings()、.children()、.contents()。
‰ ‰ DOM 插入： jQuery.before()、jQuery.after()、jQuery.replaceWith()、.append()、.prepent()、
.before()、.after()、.replaceWith()。

下面是1.7.1版本的源码

    // Take an array of elements and push it onto the stack

    // (returning the new matched element set)

    pushStack: function( elems, name, selector ) {

        // Build a new jQuery matched element set

        var ret = this.constructor();

        if ( jQuery.isArray( elems ) ) {

            push.apply( ret, elems );

        } else {

            jQuery.merge( ret, elems );

        }

        // Add the old object onto the stack (as a reference)

        ret.prevObject = this;

        ret.context = this.context;

        if ( name === "find" ) {

            ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;

        } else if ( name ) {

            ret.selector = this.selector + "." + name + "(" + selector + ")";

        }

        // Return the newly-formed element set

        return ret;

    },

在英文注释里面已经告诉我们这个方法是干什么的了，就是把获取的元素数组放到栈中返回一个新的被匹配的数组，说白了就是在执行jQuery构造函数之后会产生一个实例对象，里面放着匹配到的元素，当使用这一个方法是就会在新建一个空的jQuery对象，然后把调用这个方法的对象匹配到的元素放到栈中，就是一个数组然后通过一个指针指向调用此方法的对象，这样就就是一个链式栈可以不断扩展。可以让我们实现“向后”操作，比如end()方法，下面分析源码：

‰ ‰ 参数 elems：将放入新 jQuery 对象的元素数组（或类数组对象） 。
‰ ‰ 参数 name：产生元素数组 elems 的 jQuery 方法名。
‰ ‰ 参数 selector：传给 jQuery 方法的参数，用于修正原型属性 .selector。

 // Build a new jQuery matched element set

        var ret = this.constructor();

构造一个新的空 jQuery 对象 ret，this.constructor 指向构造函数 jQuery()，ret就是一个空的jQuery对象

 if ( jQuery.isArray( elems ) ) {

            push.apply( ret, elems );

        } else {

            jQuery.merge( ret, elems );

        }

判断一下elems是不是数组，如果不是用merge（后续分析）转换成数组，如果是放ret中，此时的elems是一个数组不能直接ret.push否则就会变成二维数组，这里也是巧妙的利用了apply的数组参数属性直接将一个数组的元素添加到另一个数组组，很好用的方法赶紧收藏！这样就实现了数据转移

 // Add the old object onto the stack (as a reference)

        ret.prevObject = this;

既然是链式的那么必须有指针，在新对象中添加这么一个属性来指向当前的jQuery对象

if ( name === "find" ) {

            ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;

 } else if ( name ) {

            ret.selector = this.selector + "." + name + "(" + selector + ")";

 }

给ret加一个selector属性，这里的selector并不是之前分析的原型属性selector表示的选择字符串，它的主要作用是为了调试方便，可以看到方法名和旧的对象的选择字符串以及传入的参数selector，至于为什么把find方法单独列出来还要等到find方法分析完再看吧

 // Return the newly-formed element set

        return ret;

最后把新的jQuery对象返回出去，其实这个方法代码量不大就是思想比较难理解，为此调用下看下结构：

<!doctype html>

<html>

    <head>

        <meta charset='utf-8'/>

        <title>jQuery源码分析-原型属性和方法</title>

    </head>

    <body>

       <div>

       </div>

       <div><a></a></div>

    </body>

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

    <script>

        console.dir($('a').parent().parent(0));

    </script>

</html>

然后看下元素机构

这样就很容易理解了，这个时候再来看出栈的方法end()

    end: function() {

        return this.prevObject || this.constructor(null);

    },

原来这个方法就是找的prevObject，根据上面的结构图不难看出

$('a').parent().parent(0).end()

运行结果指向的是div元素这两个方法一进一出搭配使用，只不过是end方法是在页面大摇大摆的被使用参考手册也有其使用方法，而pushStack只能做一个幕后英雄啦

jQuery原型方法.pushStack源码分析的更多相关文章

  1. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

  2. jQuery 2.0.3 源码分析 Deferred（最细的实现剖析，带图）

    Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...

  3. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

  4. jQuery 2.0.3 源码分析 Deferred概念

    JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码 ...

  5. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  6. jQuery 2.0.3 源码分析 事件体系结构

    那么jQuery事件处理机制能帮我们处理那些问题? 毋容置疑首先要解决浏览器事件兼容问题 可以在一个事件类型上添加多个事件处理函数,可以一次添加多个事件类型的事件处理函数 提供了常用事件的便捷方法 支 ...

  7. jQuery.lazyload使用及源码分析

    前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...

  8. jQuery 2.0.3 源码分析 Deferrred概念

    转载http://www.cnblogs.com/aaronjs/p/3348569.html JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而 ...

  9. jQuery Deferred对象详细源码分析（-）

    本系列文章讲介绍这个Deferred东西到底拿来干什么,从1.5版本加进来,jQuery的很多代码都重写了.直接先上源码分析了,清楚了源码分析,下节将讲具体的应用 以及应用场景. 创建对象 var d ...

随机推荐

  1. Cocos2d-x 3.2 学习笔记（四）学习打包Android平台APK!

    从cocos2dx 3.2项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后,以后就会非常快捷! (涉及到3.1.1版本的,请自动对应3.2版本,3.x版本的环境搭建都是一样的) ...

  2. [OpenCV] Samples 06: [ML] logistic regression

    logistic regression,这个算法只能解决简单的线性二分类,在众多的机器学习分类算法中并不出众,但它能被改进为多分类,并换了另外一个名字softmax, 这可是深度学习中响当当的分类算法 ...

  3. Spark入门实战系列--6.SparkSQL（下）--Spark实战应用

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

  4. Spark入门实战系列--8.Spark MLlib（下）--机器学习库SparkMLlib实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .MLlib实例 1.1 聚类实例 1.1.1 算法说明 聚类(Cluster analys ...

  5. Tools - VirtualBox

    为CentOS虚拟机安装增强功能 启动CentOS虚拟机,点击"菜单 -> 设备 -> 安装增强功能". vboxadd的映像文件将会被挂载到虚拟机,在桌面也可以看到, ...

  6. js获取图片的真实大小，字节大小

    在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...

  7. Android学习笔记之Fast Json的使用

    PS:最近这两天发现了Fast Json 感觉实在是强大.. 学习内容: 1.什么是Fast Json 2.如何使用Fast Json 3.Fast Json的相关原理 4.Fast Json的优势, ...

  8. ehcache报错

    jfinal2.0+tomcat7+ehcache2.6.11+Linux Linux version 2.6.18-164.el5 (mockbuild@x86-002.build.bos.redh ...

  9. SQL Server 2014如何提升非在线的在线操作

    在今天的文章里,我想谈下在线索引重建操作( Online Index Rebuild operations),它们在SQL Server 2014里有怎样的提升.我们都知道,自SQL Server 2 ...

  10. SQL Server中的事务日志管理(8/9)：优化日志吞吐量

    当一切正常时,没有必要特别留意什么是事务日志,它是如何工作的.你只要确保每个数据库都有正确的备份.当出现问题时,事务日志的理解对于采取修正操作是重要的,尤其在需要紧急恢复数据库到指定点时.这系列文章会 ...