萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 淺談jQuery構造函數分析

淺談jQuery構造函數分析

   jquery的構造函數很好的運用的javascript的充分利用了JavsScript語言的動態性——對行參的類型和個數沒有的嚴格要求,以至於一個函數可以實現多種功能需求,也為JavaScript語言的多態性提供了基礎,在這個構造函數中,提供了六種不同的調用格式(根據官方API文檔)

  在我的上一篇文章裡面 闡述了jQuery的大致框架,知道了所有代碼都是寫在了一個自調用匿名函數裡面,並且傳入了window對象,源碼是這樣的:

  ?

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

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

  其實jQuery是面向對象js庫,也有構造函數,每次調用jQuery方法是就會實例化一個jQeury對象,但是jQuery的寫法卻非常高明。

  首先先談談js面向對象: js雖然不是面向對象的語言,卻又很多面向對象的寫法,這裡推薦大家看一下圖靈的《javascript高級程序設計》中的面向對象的程序設計部分。在眾多方法中比較常使用的寫法是構造加原型方式,下面舉例:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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說你好

  其實jQuery也是采用的這種方式只不過用了更聰明的寫法,一起再看看jQuery的構造函數有什麼不同

  ?

1 2 3 4 5 // 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真正的函數是init方法,當我們調用jQuery時會返回new init()的結果而不直接new jQuery() .

  jQuery.fn是啥呢,在後面我們會看到這樣一句代碼

  ?

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

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

  ?

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

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

copyright © 萬盛學電腦網 all rights reserved