jQuery源码研究：jQuery原型对象上的属性方法(上)
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 }
8}
9
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]
22get()方法：如参数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 }
10}
11
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方法暂时还未看到，先不管
5
6 // 通过this把老的jQuery原型对象挂载到新建的ret对象的prevObject属性上云，这可以看作是jQuery对象的一个引用吧
7 ret.prevObject = this;
8
9 // 返回这个新创建的元素集合
10 return ret;
11 },
12}
13
14var res = jQuery.prototype.pushStack($('li'));
15console.log(res);
16// 打印结果看下图
这个方法其实作用就是把元素集合添加到一个新的对象中，并且这个对象还具有jQuery对象的引用，所以也就是具有jQuery对象的所有方法和属性，链式调用起来妥妥的呀。
例如这个沙雕作法：向 jQuery 栈中先压入一些元素，然后再删除它们，之后再退回到之前刚压入栈的状态。
1$().pushStack( document.getElementsByTagName("div")).remove().end();虽然沙雕，但很好玩有没有，感觉在某些地方会发挥奇妙的作用。这个方法的思路也非常值得借鉴，写原生时直接用也很妥了。
时间关系，今天先到这，剩下的明天再写吧。
腾讯云开发者
