jQuery构造函数init参数分析
在我的上一篇随笔里面分析了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参数分析续
如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string" ) {...} 开始分不同的情况处理 // Are we dealing with HTML string or an ID? if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 )
-
jQuery.prototype.init选择器构造函数源码思路分析
一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询
-
jQuery学习笔记之jQuery.fn.init()的参数分析
从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出参数selector和context是来自我们在调用jQuery方法时传过来的.那么selector和context都有哪些可能. 对于表格中的4~9行中的可能做具体分析. 如果selector是字符串,则首先检测是html代码还是#id.126行的if语句:以"<"开头,以">"结尾,且长度>=3.则假设额这个是HTML
-
jQuery源码分析之init的详细介绍
init 构造器 由于这个函数直接和 jQuery() 的参数有关,先来说下能接受什么样的参数. 源码中接受 3 个参数: init: function (selector, context, root) { ... } jQuery() ,空参数,这个会直接返回一个空的 jQuery 对象,return this. jQuery( selector [, context ] ) ,这是一个标准且常用法,selector 表示一个 css 选择器,这个选择器通常是一个字符串,#id 或者 .cl
-
jQuery构造函数init参数分析
在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var
-
浅谈jQuery构造函数分析
在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ) {...})( window ); 我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方法一样,jQuery就是普通的函数吗?如果是构造函数为什么不是 new $(document)的常
-
jquery的总体架构分析及实现示例详解
jQuery整体框架甚是复杂,也不易读懂,这几日一直在研究这个笨重而强大的框架.jQuery的总体架构可以分为:入口模块.底层模块和功能模块.这里,我们以jquery-1.7.1为例进行分析. jquery的总体架构 复制代码 代码如下: 16 (function( window, undefined ) { // 构造 jQuery 对象 22 var jQuery = (function() { 25 var jQuery = functio
-
jQuery支持动态参数将函数绑定到事件上的方法
本文实例讲述了jQuery支持动态参数将函数绑定到事件上的方法.分享给大家供大家参考.具体分析如下: 下面的js代码提供了两种方法用于绑定函数到事件,其中方法二可以传递动态参数,非常实用 //方法一 $('#foo').click(function(event) { alert('User clicked on "foo."'); }); //方法二, 支持动态传参 $('#foo').bind('click', {test1:"abc", test2:"
-
jquery获取url参数及url加参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作,下面通过文字说明加代码分析的形式给大家解析,具体详情请看下文. 1.jquery获取url很简单,代码如下: 复制代码 代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么重要的事情 首先看看单纯的通过javascript是如
-
从汇编看c++中默认构造函数的使用分析
c++中的源程序: 复制代码 代码如下: class X {private: int i;}; int main() { X x;} 上面的类X没有定义构造函数,仅仅有一个int i. 下面为其汇编程序: 复制代码 代码如下: ; 7 : int main() { push ebp;ebp为一个寄存器,总是指向一个函数调用堆栈的栈底,作为基址,用偏移量来访问该调用栈上的变量,但这里没有任何变量要访问,因此不起作用 mov ebp, esp;这两句的作用是为了
-
c++中拷贝构造函数的参数类型必须是引用
在C++中, 构造函数,拷贝构造函数,析构函数和赋值函数(赋值运算符重载)是最基本不过的需要掌握的知识. 但是如果我问你"拷贝构造函数的参数为什么必须使用引用类型?"这个问题, 你会怎么回答? 或许你会回答为了减少一次内存拷贝? 很惭愧的是,我的第一感觉也是这么回答.不过还好,我思索一下以后,发现这个答案是不对的. 原因:如果拷贝构造函数中的参数不是一个引用,即形如CClass(const CClass c_class),那么就相当于采用了传值的方式(pass-by-value),而传