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

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

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

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

首先先談?wù)刯s面向?qū)ο螅?nbsp; js雖然不是面向?qū)ο蟮恼Z(yǔ)言，卻又很多面向?qū)ο蟮膶懛?，這里推薦大家看一下圖靈的《javascript高級(jí)程序設(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+'說(shuō)'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom說(shuō)你好

其實(shí)jQuery也是采用的這種方式只不過(guò)用了更聰明的寫法，一起再看看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就是原型對(duì)象也就是說(shuō)在jQuery原型里面有一個(gè)init方法，這個(gè)方法是真正的構(gòu)造函數(shù)。這樣寫的好處就是不需要在寫$().init()這樣的操作，直接就初始化了，但是還有一個(gè)問(wèn)題就是既然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;

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

最新評(píng)論