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对象的属性，这样我们就可以在外部直接使用了。