jQuery源码学习（版本1.11）-构造函数

概述

本文详细分析jquery-1.11.1.js源码文件行数：46~172；

代码简介：定义了一些常用的变量，定义了函数jQuery作为创建JQ对象的构造函数，并且重新定义了其原型对象；

下文进行详细代码分析。

jQuery构造函数

以下代码定义了一些常用的变量，以及构造函数jQuery。

// 定义一个数组deletedIds
// 下面的slice，concat，push，indexOf全是JS原生数组的方法
var deletedIds = [];

var slice = deletedIds.slice;

var concat = deletedIds.concat;

var push = deletedIds.push;

var indexOf = deletedIds.indexOf;

// 定义一个JS Object对象class2type
// toString，hasOwn对应Object对象的toString以及hasOwnProperty方法
var class2type = {};

var toString = class2type.toString;

var hasOwn = class2type.hasOwnProperty;

// 之后用于判断浏览器兼容的对象
var support = {};

var
	// 版本号
	version = "1.11.1",

	// 构造函数jQuery，用于创建JQ对象
	jQuery = function( selector, context ) {
		// JQ对象实际是调用jQuery.fn.init( selector, context )去创建的，jQuery方法是在init外包装了一层
		return new jQuery.fn.init( selector, context );
	},

	// trim()方法使用的正则
	rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

	// jQuery.camelCase使用的正则
	// rmsPrefix是匹配css前缀，rdashAlpha匹配横杠之后的首字符
	rmsPrefix = /^-ms-/,
	rdashAlpha = /-([\da-z])/gi,

	// jQuery.camelCase的callback方法，转换匹配到的字符
	fcamelCase = function( all, letter ) {
		return letter.toUpperCase();
	};

jQuery构造函数原型

以下代码重新定义了构造函数的原型对象，初始化了一些JQ对象常用方法。

// 原型对象被命名空间jQuery的属性fn引用，这是一种编程思想
jQuery.fn = jQuery.prototype = {
	// 版本号
	jquery: version,

	// 新定义的原型对象，constructor指向jQuery函数
	constructor: jQuery,

	// 每个JQ对象都会有的属性selector，在调用jQuery.fn.init创建JQ对象实例时，实例属性一般会覆盖掉这个原型里的属性
	selector: "",

	// JQ对象是类数组，默认length为0
	length: 0,

	// JQ对象实例是一个类数组对象，toArray使用数组的slice()方法将实例内部的数据转化成对象
	toArray: function() {
		return slice.call( this );
	},

	// 根据传入num数值获取dom节点
	get: function( num ) {
		return num != null ?

			// 如果num存在则根据其值获取对应dom节点，兼容正负值的情况
			( num < 0 ? this[ num + this.length ] : this[ num ] ) :

			// 不存在则调用slice创建新数组并返回
			slice.call( this );
	},

	// Take an array of elements and push it onto the stack
	// (returning the new matched element set)
	pushStack: function( elems ) {

		// 建新空JQ对象，与elems合并
		var ret = jQuery.merge( this.constructor(), elems );

		// 新对象定义属性prevObject指向this
		ret.prevObject = this;
		ret.context = this.context;

		// 返回新对象
		return ret;
	},

	// 实际调用的是jQuery.each()，见jQuery.each()分析
	each: function( callback, args ) {
		return jQuery.each( this, callback, args );
	},

	// 调用工具方法里的map()，并且利用pushStack()创建新的JQ对象返回
	map: function( callback ) {
		return this.pushStack( jQuery.map(this, function( elem, i ) {
			return callback.call( elem, i, elem );
		}));
	},

	// 调用原生数组的slice()方法，并且利用pushStack()创建新的JQ对象返回
	slice: function() {
		return this.pushStack( slice.apply( this, arguments ) );
	},

	// first跟last都是调用eq方法
	first: function() {
		return this.eq( 0 );
	},

	last: function() {
		return this.eq( -1 );
	},

	// 调用pushStack返回一个新JQ对象，以this[i]为内容
	eq: function( i ) {
		var len = this.length,
			j = +i + ( i < 0 ? len : 0 );
		return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
	},

	// 返回prevObject，不存在则返回空JQ对象
	end: function() {
		return this.prevObject || this.constructor(null);
	},

	// js原生数组的方法加进JQ对象
	push: push,
	sort: deletedIds.sort,
	splice: deletedIds.splice
};