jQuery源码研究:jQuery原型对象上的属性方法(上)
jQuery
源码学习第二节。
今天看下简化框架的第二部分:
line: (146 - 225) 为jQ对象添加一些方法和属性
。
1jQuery.fn = jQuery.prototype = {
2 constructor: jQuery,
3 length: 0,
4 // 添加原型方法和属性...
5}
从上段代码中可以看到,
jQuery
对象作为构造函数,在其原型上定义了一些属性和方法,同时其原型也被指向
jQuery
对象的属性
fn
上面。
jQuery
原型对象
jQuery.prototype
有若干个属性和方法:
constructor
、
length
、
toArray()
、
get()
、
pushStack()
、
each()
、
map()
、
slice()
、
first()
、
last()
、
eq()
、
end()
等。
其中属性
constructor
指向构造器即
jQuery
对象。
length
属性默认值为0,为对象添加属性
length
,感觉这是要把对象作为类数组来处理,且看后续的代码阅读中能发现用在哪,暂时先不关注。
至于定义的方法,下面一个个来看。首先需要明确,这些方法都是
jQuery
实例对象的方法;其次对于js中
call
的作用要有深刻的理解,才不会看晕。
toArray
方法:返回一个包含jQuery对象集合中的所有DOM元素的数组。这个方法不接收任何参数。所有匹配的DOM节点都会包含在一个标准的数组中。
1//jQuery源码
2var arr = [],
3 slice = arr.slice;
4jQuery.prototype = {
5 toArray: function() {
6 return slice.call( this );
7 }
10//demo.html
11<body>
12 <ul>
13 <li>a</li>
14 <li>b</li>
15 <li>c</li>
16 <li>d</li>
17 </ul>
18</body>
19console.log($('li').toArray());
20//打印
21// [li, li, li, li]
22
get()
方法:如参数
num
为int数值,则返回一个所有匹配DOM中第
num
个的元素集合,否则就返回所有匹配的元素数组
1jQuery.prototype = {
2 get: function(num) {
3 //返回所有元素的数组
4 if(num == null){ //
5 return slice.call( this )
6 }
7 //只返回指定索引的匹配元素
8 return num<0?this[num+this.length]:this[num];
9 }
12//demo.html
13console.log($('li').get(1));
14console.log($('li').get());
15//打印结果:
16// <li>b</li>
17// [li, li, li, li]
这里有个小知识点:参数
num
不传时值为
undefined,undefined == null
结果为
true
,
undefined === null
结果则为
false
。
pushStack()
方法:用于将一个DOM元素集合加入到jQuery栈。
1jQuery.prototype = {
2 pushStack: function( elems ) {
3 // 创建一个新的jQuery匹配元素集合
4 var ret = jQuery.merge( this.constructor(), elems ); //jQuery对象的merge方法暂时还未看到,先不管
6 // 通过this把老的jQuery原型对象挂载到新建的ret对象的prevObject属性上云,这可以看作是jQuery对象的一个引用吧
7 ret.prevObject = this;
9 // 返回这个新创建的元素集合
10 return ret;
11 },