在我的上一篇文章里面 闡述了jQuery的大致框架，知道了所有代碼都是寫在了一個(gè)自調(diào)用匿名函數(shù)里面，并且傳入了window對象，源碼是這樣的：

(function( window, undefined ) {...})( window );

我們通過alert(jquery) 知道它是一個(gè)對象，那么這個(gè)對象是怎么構(gòu)造出來的呢？我們使用$(document)類似的寫法獲取元素，就好像直接調(diào)用了普通的方法一樣，jQuery就是普通的函數(shù)嗎？如果是構(gòu)造函數(shù)為什么不是 new $(document)的常見形式呢？

其實(shí)jQuery是面向?qū)ο骿s庫，也有構(gòu)造函數(shù)，每次調(diào)用jQuery方法是就會(huì)實(shí)例化一個(gè)jQeury對象，但是jQuery的寫法卻非常高明。

首先先談?wù)刯s面向?qū)ο螅?nbsp; js雖然不是面向?qū)ο蟮恼Z言，卻又很多面向?qū)ο蟮膶懛ǎ@里推薦大家看一下圖靈的《javascript高級程序設(shè)計(jì)》中的面向?qū)ο蟮某绦蛟O(shè)計(jì)部分。在眾多方法中比較常使用的寫法是構(gòu)造加原型方式，下面舉例：

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'說'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom說你好

其實(shí)jQuery也是采用的這種方式只不過用了更聰明的寫法，一起再看看jQuery的構(gòu)造函數(shù)有什么不同

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

從源碼中可以看到在jQuery真正的函數(shù)是init方法，當(dāng)我們調(diào)用jQuery時(shí)會(huì)返回new init()的結(jié)果而不直接new jQuery() .

jQuery.fn是啥呢，在后面我們會(huì)看到這樣一句代碼

jQuery.fn = jQuery.prototype = {...

這樣就很好理解了，其實(shí)jQuery.fn就是原型對象也就是說在jQuery原型里面有一個(gè)init方法，這個(gè)方法是真正的構(gòu)造函數(shù)。這樣寫的好處就是不需要在寫$().init()這樣的操作，直接就初始化了，但是還有一個(gè)問題就是既然init才是構(gòu)造函數(shù)那我們寫在jQuery上面的那么方法實(shí)例不是不能調(diào)用嗎?init的實(shí)例化自然只能調(diào)用init的方法啦，往后看到這樣一句代碼

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

之前講過jQuery.fn=jQuery.protype,這就意味著jQuery的原型對象賦給了init的原型，這樣jQuery的原型方法自然init也就都有了，通過這樣構(gòu)造方式S使得使用jQuery方法非常簡單既不需要new jQuery()的操作也不需要手動(dòng)初始化就行調(diào)用普通函數(shù)一樣簡單。

最新評論