jQuery建構函式簡單介紹

在使用jQuery獲取元素物件的時候，我們通常是用以下方式:

[JavaScript] 純文字檢視 複製程式碼
$("li")

上面的由於過於普通，可能很少人對它感覺特別奇怪。

不過上面的方法獲取的也是一個例項物件，好像我們並沒有用到new運算子來建立。

關於建構函式和new的作用可以參閱以下兩個文章:

（1）.建構函式可以參閱javascript建構函式一章節。

（2）.new運算子可以參閱js new運算子的作用一章節。

其實jQuery是通過一個比較巧妙的方式來實現了建構函式的功能。

先看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var Antzone=function(name,age){
  this.name=name;
  this.age=age;
}
Antzone.prototype={
 constructor:Antzone,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
   console.log(this.name+msg);
 }
};
var antzone=new Antzone('螞蟻部落',3); 
antzone.init('歡迎您');

其實jQuery就是採用上面的方式，但是方式更加高明一些，看jQuery的原始碼:

[JavaScript] 純文字檢視 複製程式碼
// 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.fn.init()才是真正的建構函式，這樣我們建立物件例項的時候就沒必要new jQuery()。

看一下jQuery.fn的原始碼:

[JavaScript] 純文字檢視 複製程式碼
jQuery.fn = jQuery.prototype = {...

說明此函式是jQuery的原型物件，也就是說原型物件中有int()這麼一個方法，利用它實現了例項化功能。

這裡我們又有一個疑問，那就是既然init()才是建構函式，那麼我們為jQuery新增的例項方法，會不會無法呼叫。

jQuery的解決方式如下:

[JavaScript] 純文字檢視 複製程式碼
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

把jQuery的圓形物件賦值給int()原型物件，那麼int()也就具有jQuery的原型的所有方法。