读jQuery之一(对象的组成)

以下是jQuery 1.6.1 代码片段

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var  jQuery = function ( selector, context ) {          // The jQuery object is actually just the init constructor 'enhanced'          return  new  jQuery.fn.init( selector, context, rootjQuery );      },      ...      class2type = {};       jQuery.fn = jQuery.prototype = {      constructor: jQuery,      init: function (selector, context, rootjQuery){      } }   // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn;

 

初看上去像是在用 原型方式 在写一个类jQuery(别名$)，但实际我们使用时是函数调用$("#id")，却不是new $("#id")。
标识符 jQuery是一个function，其内new了一个function init的实例，然后返回。至此我们知道其真正的构造器是jQuery.fn.init。jQuery写的实在诡异，它把init又挂在了jQuery的prototype上，阅读起来有些绕人。

 

jQuery.fn.init.prototype = jQuery.fn; 是关键的一句。该句把function jQuery的原型赋值给了function init的原型。当调用$("#id")时返回的对象组成包括两个部分。
1，由function init中this带的(如this.context)；
2，由function jQuery的prototype带的(如this.size/this.toArray)；

 

模仿jQuery写一个

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// zchain-0.1.js function  $(selector){      return  new  $.prototype.init(selector); } $.prototype={      init: function (selector){          if (selector === undefined){              this .length = 0;              return  this ;          }          if (selector.nodeType==1){              this [0] = selector;          } else {              this [0]=document.getElementById(selector);          }          this .length=1;      },      css: function (name,value){          this [0].style[name] = value;          return  this ; //链式调用      },      hide: function (){          var  self= this ;          setTimeout( function (){              self[0].style.display= "none" ;          },3000);          return  this ; //链式调用      } } $.prototype.init.prototype=$.prototype;

简单起见，这里选择器只传html element或元素id（后续会增强，但不实现全部css selector），this上挂了length属性，赋值为1。

当我们调用时

1 2	var  obj = $();   console.dir(obj);

$()实际没有什么意义，只是为了测试调用后obj的组成。firebug控制台输出如下：
length:0;
init:function
attr:function
hide:function


即obj对象是由function init中this及function $.prototype组成的。

再看下$.prototype上的方法，我只添加了css和hide方法，这两个方法的实现也是极其简陋的。

1 2 3 4 5

<script src= "http://files.cnblogs.com/snandy/zchain-0.1.js" ></script> <div id= 'content' >3 seconds later I will hide.</div> <script type= "text/javascript" >      $( "content" ).css( "color" , "red" ).hide(); </script>

先调用css设置了字体颜色为红色，3秒后隐藏了。

 

总结下：
jQuery对象指的是jQuery.prototype.init的实例，简单的说就是new jQuery.prototype.init。这里jQuery.prototype.init的类型是function，可以看成是一个类。

jQuery对象由以下部分组成：

1. 挂在jQuery.prototype.init中的this上的属性或方法。
2. 挂在jQuery.prototype.init.prototype上的属性或方法。
3. 因为把jQuery.prototype赋值给了jQuery.prototype.init.prototype，所以挂在jQuery.prototype上的属性和方法也是jQuery对象的一部分。
4. 通过jQuery.fn.extend({...})方式扩展的属性或方法（后续提到）。