Jquery源码中的javascript基础知识（三）

这篇主要说一下在源码中jquery对象是怎样设计实现的，下面是相关代码的简化版本：

 1 (function( window, undefined ) { 2     // code 定义变量 3     jQuery = function( selector, context ) { 4         return new jQuery.fn.init( selector, context, rootjQuery ); 5     }, 6     // code 定义变量 7     jQuery.fn = jQuery.PRototype = { 8         jquery: core_version, 9         constructor: jQuery,10         init: function( selector, context, rootjQuery ) {11             // code 初始化、参数处理12         }13         // code 一些方法（each、ready、first、eq等）14     }15     jQuery.fn.init.prototype = jQuery.fn;16     // code 其他17     if ( typeof window === "object" && typeof window.document === "object" ) {18         window.jQuery = window.$ = jQuery;19     }20 })( window );

首先，回顾一下Javascript中相关知识。

在javascript中特定类型的对象是通过构造函数来创建的，例如：

 1 function Person(name){ 2     this.name = name; 3     this.sayName = function(){ 4         alert(this.name); 5     } 6 } 7 // 作为普通函数使用 8 Person('Yanger90'); 9 window.sayName();10 11 // 作为构造函数使用12 var person = new Person('Yanger90');13 person.sayName();

更好的方式-原型模式

function Person(){}Person.prototype = {    name: "Yanger90",    syaName: function(){        console.log(this.name);    }};var  person = new Person();

每一个函数都有一个prototype（原型）属性，里面包含的属性和方法，是所有通过该构造函数创建的实例对象所共享的。对于一些公用的方法，像例子中的sayName方法，就可以放在原型中共享而不用像第一种方式那样，每个实例对象都要重新创建一遍。

好了，基础知识就简单介绍到这，详细可参阅《javascript高级程序设计》这本书。

回到jquery中，我们一般使用jquery语法类似这样：

$(element).CSS();

选择元素然后执行相应方法，那么前面的$(element)就应该是一个实例对象，再调用其方法。

我们看到在源码开始的部分就定义了jQuery变量：

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

它确实返回了一个实例对象，构造函数是init，接着往下看。

jQuery.fn = jQuery.prototype = {    jquery: core_version,    constructor: jQuery, // 修正以字面量方式重写原型对象造成的指向问题    init: function( selector, context, rootjQuery ) {        // code 初始化、参数处理    }    // code 一些方法（each、ready、first、eq等）}

找到init发现它是jQuery原型（prototype）中的一个方法。

问题来了，init方法中只是对参数进行了处理，并没有我们常用的each、ready、first、eq等方法，它们都在jQuery原型（prototype）中，所以还无法调用这些方法，那么继续往后看。

jQuery.fn.init.prototype = jQuery.fn;

这句话把init的原型指向了jQuery.fn，也就是jQuery.prototype，这样一来，jQuery原型（prototype）中的属性和方法就共享给了通过init构造函数创建的实例对象，也就实现了继承。

最后，在jquery源码的末尾有一句

window.jQuery = window.$ = jQuery;

jQuery是在匿名函数中定义的，所以外部是无法访问的，这里将它赋值给window对象的属性，这样我们就可以在外部直接使用了。