读jq之一（jq对象的组成）

以下是jquery 1.3.2 代码片段

...
jQuery = window.jQuery = window.$ = function( selector, context ) {
	return new jQuery.fn.init( selector, context );
};
jQuery.fn=jQuery.prototype={
	init:function(){...},
        ...
}
jQuery.fn.init.prototype = jQuery.fn;
...

 

初看上去像是在用原型方式 定义一个类jQuery($)，但实际我们使用时是函数调用$("#id")，却不是new $("#id")。

function jQuery中new了一个function init的实例，然后返回。见具名函数的调用方式(3) 。jquery写的实在诡异，它把init又挂在了function jQuery的prototype上，阅读起来有些绕人。

 

jQuery.fn.init.prototype = jQuery.fn; 是关键的一句。该句把function jQuery的原型赋值给了function init的原型。当调用$("#id")时返回的对象组成包括两个部分。

1，由function init中this带的(如length,context)；

2，由function jQuery的prototype带的(如size，each，attr等方法)；

 

模仿jQuery来写一个

function $(selector){
	return new $.prototype.init(selector);
}
$.prototype={
	init:function(selector){
		if(selector.nodeType==1){
			this[0] = selector;
		}else{
			this[0]=document.getElementById(selector);
		}
                this.length=1;
	},
	attr:function(name,value){
		this[0].setAttribute(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，this上挂了length属性，赋值为1。当我们如下调用时

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

这行代码实际没有什么意义，只是为了测试调用后obj的组成。firebug控制台输出如下：

length:0;

init:function

attr:function

hide:function

 

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

 

测试下$.prototype上的方法（假设页面body添加了id=content）：

$("content").attr("bgcolor","red").hide();

 

先调用attr添加了id=content属性，稍候就隐藏了。

 

总结下：

jquery对象指的是jQuery.prototype.init的实例，简单的说就是new jQuery.prototype.init。

这里jQuery.prototype.init的类型是function，可以看成是一个类。源码中如下：

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

 

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({...})方式扩展的属性或方法。（见下一篇）

 

评论

1 楼 LovingBaby 2016-03-10  

说的很清楚！jQuery作者为了实现简洁调用的苦心！高超的编程技巧！