jQuery中原型分析

本文参考代码为jQuery 2.0.3

使用jQuery时，都是相似于$('XXX').xxx()的用法，那么先来找找$

在jQuery源码最后几行能够看到:  (代码8826行）

window.jQuery = window.$ = jQuery;

在这步中将 $ 也就是 jQuery  挂载到了window对象上 , 因此能够在页面上直接使用$() , 接下来找找jQuery函数的定义

源码60行位置能够看到以下：（代码60行）

jQuery = function( selector, context ) {
	return new jQuery.fn.init( selector, context, rootjQuery );
},

在这里定义了一个叫jQuery的函数变量，在这里用new返回了一个实例对象，这样作就使得使用jQuery时不用new进行实例化了，只须要$()就建立了实例对象，

那么接着去看看这个init函数，因为jQuery中的init函数很是复杂，这里进行下简写,只考虑选择器为ID的状况（代码96行）

jQuery.fn = jQuery.prototype = {
    init: function( selector, context, rootjQuery ) {
	var elem,match;
        var rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
        match = rquickExpr.exec( selector );
        elem = document.getElementById( match[2] );
	if ( elem && elem.parentNode ) {
	　　this.length = 1;
	　　this[0] = elem;
	}
	this.context = document;
	this.selector = selector;
	return this;
    }
}    

jQuery.fn在这充当jQuery.prototype别名的做用，在jQuery.prototype中的init函数返回了一个数组，里面放着指定ID的引用，到了这里就实现了 $('#ID')

jQuery.fn.init是构造函数的话原型方法就应该在jQuery.fn.init.prototype中，然而jQuery中分为静态方法和实例方法，全部实例方法放在了jQuery.fn中，这些实例方法也便是$('#'ID).xx()中那个xx，在jQuery源码init函数下方紧跟着就对原型进行了修改  （代码283行）

jQuery.fn.init.prototype = jQuery.fn;　　

到这里也就把jQuery的原型对象赋值给了init的原型，所以使用$()返回的对象就能够使用jQuery原型上的方法了。

 

更多jquery分析能够参考 http://nuysoft.iteye.com/blog/1190542