Jquery实战_读书笔记3—包装器

在前面的学习中了解到通过jQuery提供的强大的选择功能可以选择出我们想要的任意元素如：$("a"),$(".specialClass")，也许你已了解到，通过jQuery的选择器返回的对象并不是匹配元素的DOM对象，而是jQuery在匹配元素的dom对象之上定义的特殊JavaScript对象，该对象包含着与选择器相匹配的DOM元素的数组，同时该对象还拥有大量jQuery预定义的有用方法，这些方法能作用于这些匹配的DOM对象。
这类对象可以理解为“包装器”，这里引用书上的定义【用编程的话来说，这种构造称为包装器（wrapper),因为它用扩展功能来对匹配的元素进行包装。我们使用术语jQuery包装器或者包装器集(wrapped set)，来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。】

包装器构造原理分析
为了能更好的理解jQuery包装器对象的实质，在此简单分析jQuery是如何构造该包装器对象
首先看代码中如何定义$(即jQuery)对象
jQuery = window.jQuery = window.$ = function( selector, context ) {
  // The jQuery object is actually just the init constructor 'enhanced'
  return new jQuery.fn.init( selector, context );
 }
通过上面的代码可以看出jQuery对象指向一个函数对象，这里先不看函数体代码是什么。

接下来jQuery定义了如下代码
jQuery.fn = jQuery.prototype = {
 init: function( selector, context ) {
  ......//
 },
 selector: "",
 size: function() {
  ......//
 },
 ......//
}
上面的这段代码在jQuery对象中定义了fu属性并指向jQuery对象的原型对象prototype,同时重新定义了jQuery的原型对象的，预定义了一系列的原型方法，可以看到在原型对象定义了init函数，该函数对象即为上面用来创建包装集对象的函数。
现在来看$("a")或jQuery("a")返回的对象到底是一个什么样的对象，在开始的代码中看到执行jQuery("a")是调用jQuery指向的函数，该函数最终返回了jQuery.init函数的实例对象，所以可以简单理解$("a")最终返回的是jQuery.init函数的一个实例对象

init: function( selector, context ) {
  // Make sure that a selection was provided
  selector = selector || document;

  // Handle $(DOMElement)
  ......//
 }

在上面的代码中可以暂时不用太多的关心init方法的实现

再来分析下面这句代码
///
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

将init的原型对象指向了jQuery.fn=jQuery.prototype,这样init函数就具有了jQuery对象所有预定义的原型方法，该实例对象和jQuery对象具有相同的原型方法，通过这些原型方法可以方便的操作选择器匹配的元素集。

 

以上纯属个人理解，如有不正确的地方还请多多指正。