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

猜你喜欢