jquery源码分析之jQuery对象初始化

阅读更多

在jquery实际应用中可通过$或jQuery生成jquery对象，如$("#hr_three")可生成jquery对象，jquery是如何做到的呢？

jquery加载时，入口为如下匿名方法，

(function( global, factory ) {...} ([color=red]typeof window !== "undefined" ? window : this, function( window, noGlobal) {...}[/color]));

红色部分为调用参数，global为window对象，factory为匿名方法，factory指向的匿名方法包含了整个jquery的主要功能代码。

在jquery加载调用默认方法时，通过factory( global );对factory指向的匿名方法进行调用，可以看到匿名方法调用时第二个参数并未传入，因此noGlobal参数为undefined，以下代码初始化了window全局对象的jQuery及$属性。

if ( !noGlobal ) {
    // noGlobal为undefined，因此if判断为真
	window.jQuery = window.$ = jQuery;
}

将jQuery对象赋值给了全局的jQuery及$属性，因此，可以在jquery环境中使用jQuery或$来生成jquery对象。

再来看下jQuery对象的初始过程，

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

init = jQuery.fn.init = function( selector, context, root ) {
   ...
   // this实际上指向的是jQuery对象，根据selector的类别，对jQuery对象做了很多属性增强封装并最终返回
   return this;
}

为什么this会指向jQuery对象呢？ 看以下代码

init.prototype = jQuery.fn;

jQuery.fn为jQuery的别名(参照下面代码)，而init的prototype对象又指向jQuery.fn，因此init也是jQuery对象的别名，this就指向jQuery对象了。

jQuery.fn = jQuery.prototype = {
	jquery: version,
	constructor: jQuery,
    ...
}

以上代码jQuery.fn赋值为jQuery.prototype对象，并将其自身的构造方法指向 jQuery，因此jQuery.fn实际上就是jQuery对象的别名。为什么要为jQuery设置别名呢？个人感觉是想将jQuery对象方法用别名区分开来。

以上即为jQuery对象的初始框架。

如下代码段模拟了jQuery对象生成的骨架代码：

var test = function() {
			return new test.fn.init();
		};
		
		test.fn = test.prototype = {
			constructor: test,
			
			add: function() {
			}
		};

		var init = test.fn.init = function() {
		    // 增加长度属性
			this.length = 1;
			// 增加0属性
			this[ 0 ] = "test";
			// 返回自身
			return this;
		}
		
		init.prototype = test.fn;
		
		var test = test();
		console.log(test.length + "---" + test[0]);