在我的上一篇随笔里面分析了jQuery的构造函数，jQuery对象中有一个原型方法init才是是真正的构造函数，通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法，就好像是jQuery的实例一样。下面就来看看init这个幕后的构造函数是怎么写的：

init: function( selector, context, rootjQuery ) {

...

}

可以看到这个方法接受3个参数，其前两个参数是jQuery方法传递过来的

var jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

},

Selector原则上可以输入任意值，但并不是所有值都是有意义的，只有undefined、DOM 元素、字符串、函数、jQuery 对象、普通 JavaScript 对象这几种类型是有效的，这个参数是通常是填写的但是不填写也不会报错

console.log($());

//[constructor: function, init: function, selector: "", jquery: "1.7.1", size: function…]

Context作为执行上下文或者叫执行范围可以不传入，或者传入 DOM 元素、jQuery 对象、普通 JavaScript 对象之一

参数 rootjQuery：包含了 document 对象的 jQuery 对象，用于 document.getElementById() 查找失败、selector 是选择器表达式且未指定 context、selector 是函数的情况，其实就是$(document)。

下面根据参数的不同分为12种情况逐个讨论

1.selector 可以转换为false

// Handle $(""), $(null), or $(undefined)

if ( !selector ) {

return this;

}

源码中的注释已经写得很清楚了，当是这三种情况时直接return不进行任何处理

2.参数 selector 是 DOM 元素

例如: $(document)这种写法

// Handle $(DOMElement)

if ( selector.nodeType ) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

只要是dom元素肯定有节点类型，然后把这个节点变成jquery对象的第一个元素并且赋值给上下文context，length属性是jQuery的原型属性默认为0

// The default length of a jQuery object is 0

length: 0,

这里有了一个元素之后就把length属性修改为1。return this 操作使得函数执行后的结果依然是jQuery对象这样就可以实现类似$(document).each()这样的链式调用了。最终得到的类似这样的{0:document,context:document,length:1....}对象，其实所有的情况最后都会变成这种形式的对象，除了jQuery原型属性和方法之外就是获取的dom节点并且按照阿拉伯数字依次排列，所以我们可以使用$(selector)[0]的形式代替$(selector).get(0)来获取dom对象。例如：

<!doctype html>

<html>

   <head>

      <title></title>

   </head>

   <body>

       <div></div>

       <div></div>

       <div></div>

   </body>

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

   <script>

     console.log($('div'));

/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]

0: div

1: div

2: div

context: document

length: 3

prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]

selector: "div"

.

*/

   </script>

</html>

3.参数是特殊的字符串“body”

由于body元素在一个文档对象中只有一个所以单独列出来处理

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

这里有3个条件必须同时满足,第二个必须没有上下文的条件我也不是太理解，$(‘body’,document)这样的看起来很正常的写法也会被这种情况“忽视”

 console.log($('body',document));

 /*

 jQuery.fn.jQuery.init[1]

0: body

context: document

length: 1

prevObject: jQuery.fn.jQuery.init[1]

selector: "body"

__proto__: jQuery[0]

*/

虽然和$('body')的结果是一样的,但是却被当做两种情况来看待，可能是因为body只有一个上下文只能是document没有必要添加吧，否则又要判断上下文是不是document。第三个条件是保证document.body必须存在，那么什么情况下会前两个情况满足document.body又不存在呢？首先就是js代码先于html代码加载时会出现这个是初学者经常会犯的错误，通常我们要写成：

$(function(){...})

或者

$(document).ready(function(){...})

其实这两个是一样的调取的是一个方法，dom加载这一块以后在分析。对此我们可以做个测试html代码如下：

<!doctype html>

<html>

   <head>

      <title></title>

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

      <script> 

              $('body')

   </script>

   </head>

   <body>

       <div></div>

       <div></div>

       <div></div>

   </body>

</html>

　　

然后再jQuery源代码里面输出selector、context和document.body

console.log(selector+context+document.body);

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

虽然我们只写了一个其实执行了四次，只有最后一次才是是我们调用后的结果，最后一次的结果是bodyundefinednull这个时候前两个就是满足的但是最后一个是null。回想起第一篇jQuery总体架构架构里面undefined会被重新，那么document.body会不会被重写为null呢？当我尝试在代码中修改时就会报错看来是不会的，那这个条件就是预防没有加载html就执行的情况吧

第四种是除了上述的字符串情况之外的其他字符串，情况比较多放在下一篇吧。

jQuery构造函数init参数分析（一）的更多相关文章

  1. jQuery构造函数init参数分析（三）

    分析完了字符串情况剩下的就不多了. 5.参数selector是函数 这个就是很容易想到了,首先说一下dom加载.我们通常在head里面写脚本的时候需要等待文档加载在进行处理,js是这么写的 windo ...

  2. jQuery构造函数init参数分析（二）

    接着上一篇随笔讨论. 如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string ...

  3. 浅谈jQuery构造函数

    $()函数到底做的什么 jQuery在前端领域路人皆知,对于一向喜欢玩js的博主来说,虽然能力有限,但是还是很喜欢研究他的做为.那么一个简单的美元符号$与一对常见的()括号,jQuery底层到底做了哪 ...

  4. jQuery学习笔记之jQuery.fn.init()的参数分析

    这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下   从return new jQuery.fn.init( selector, context, rootjQuer ...

  5. jQuery分析(3) - jQuery.fn.init

    1.前言 上一篇jQuery分析(2)中了解了jQuery库的骨架实现原理,这就好比摇滚音乐,摇滚音乐不是某种音乐他就像一个音乐盒子,里面包含了各种不同的摇滚风格(山地.朋克.乡村.流行.硬摇.金属. ...

  6. 四.jQuery源码解析之jQuery.fn.init()的参数解析

    从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出 参数selector和context是来自我们在调用jQuery方法时 ...

  7. jQuery构造函数分析

    在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ...

  8. jQuery 源码分析 8： 回头看jQuery的构造器（jQuery.fn，jQury.prototype，jQuery.fn.init.prototype的分析）

    在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...

  9. jQuery 源码分析2: jQuery.fn.init

    //jQuery.fn.intit 中使用到的外部变量: // 判断是否为HTML标签或#id rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w ...

随机推荐

  1. Security3: Schema 和 Permission

    Schema是Object的容器,授予对Schema访问的权限,就是授予对Schema下所有object的访问权限. 一,Schema 是object的container The new schema ...

  2. 【Win10 开发】读取PDF文档

    关于用来读取PDF文档的内容的API,其实在Win8.1的时候就有,不过没关系,既咱们讨论的是10的UAP,连同8.1的内容也包括进去,所以老周无数次强调:把以前的内容学好了,就可以在不学习任何新知识 ...

  3. android知识点随笔

    android project中Manifest.xml中的<uses-sdk>标签元素决定的. 此标签包含如下3个属性: android:minSdkVersion —— 此属性决定你的 ...

  4. 【原创】开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. 在Linux客户机与Windows宿主机之间建立共享（VitrualBox）

    VirtualBox中,如果客户机和宿主机都是Windows的话,共享相对是比较方便的.一般是通过\\vboxsvr\shared 这样的路径访问即可. 但是如果客户机是Linux的话,就略微麻烦一点 ...

  6. 把DATATABLE,DS中的内容用HTML的方式显示

    前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...

  7. Objective-C中把数组中字典中的数据转换成URL

    可能上面的标题有些拗口,学过PHP的小伙伴们都知道,PHP中的数组的下标是允许我们自定义的,PHP中的数组确切的说就是键值对.而在OC我们要用字典(Dictionary)来存储,当然了Java用的是M ...

  8. geotrellis使用（二十一）自动导入数据

    目录 前言 整体介绍 前台界面 后台控制 总结 一.前言        之前Geotrellis数据导入集群采用的是命令行的方式,即通过命令行提交spark任务来ingest数据,待数据导入完毕再启动 ...

  9. preg_match的isU代表什么意义

    正则后面的/(.*)/isU  ,“isU”参数代表什么意思?这是正则中的修正符.i是同时查找大小写字母,s是圆点(.)匹配所有字符,包括换行符.如果没有设定s,则不包括换行符.U是反转了匹配数量的值 ...

  10. struts2学习笔记--ActionContext对象

    什么是ActionContext? ActionContext是Map结构的容器,ActionContext是Action的上下文,类比ServletContext,存放着Action执行过程中的数据 ...