首頁 >web前端 >js教程 >淺談jQuery建構函式分析_jquery

淺談jQuery建構函式分析_jquery

WBOY
WBOY原創
2016-05-16 15:59:531067瀏覽

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

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

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

其實jQuery是物件導向js函式庫,也有建構函數,每次呼叫jQuery方法是就會實例化一個jQeury對象,但是jQuery的寫法卻非常高明。

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

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的構造函數有什麼不同

// 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是啥呢,在後面我們會看到這樣一句程式碼

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

這樣就很好理解了,其實jQuery.fn就是原型物件也就是說在jQuery原型裡面有一個init方法,這個方法是真正的建構子。這樣寫的好處就是不需要在寫$().init()這樣的操作,直接就初始化了,但是還有一個問題就是既然init才是構造函數那我們寫在jQuery上面的那麼方法實例不是不能調用嗎?init的實例化自然只能呼叫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也就都有了,通過這樣構造方式S使得使用jQuery方法非常簡單既不需要new jQuery()的操作也不需要手動初始化就行呼叫普通函數一樣簡單。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn