jQuery構造物件例項簡單介紹

本章節介紹一下jQuery是如何構建一個物件例項的，下面就通過程式碼簡單的做一下介紹。

先看一段程式碼:

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

從以上程式碼中可以看出，構建一個jquery物件例項，好像並沒有採用建構函式的方式，例如:

[JavaScript] 純文字檢視 複製程式碼
var obj=new jQuery("#thediv");

下面就一步一步的通過簡單的程式碼進行一下介紹。

javascript是物件導向的一門語言，函式可以作為類使用，按照正常的思維，應該如下構建jQuery物件例項:

[JavaScript] 純文字檢視 複製程式碼
var jQuery = function(selector, context) {
  //code
}
jQuery.prototype = {
   //原型
   webName:function(){},
   age:function(){}
}
var obj = new jQuery();
obj.webName();

上面的程式碼是按照我們的常規思路來實現的，但是jQuery明顯不是這麼工作的，又因為直接呼叫jQuery()函式就可以返回一個物件例項，於是可能會想到是不是此函式直接返回它的物件例項，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
var jQuery = function(selector, context) {
  return new jQuery(selector, context)
}
jQuery.prototype = {
   //原型
   webName:function(){},
   age:function(){}
}

很明顯程式碼有嚴重的問題，由於在函式內部呼叫函式本身會造成無線的遞迴呼叫，成為一個死迴圈。

那麼我們又可以想到，prototype原型中的this是指向建構函式的物件例項的，那麼程式碼改造如下:

[JavaScript] 純文字檢視 複製程式碼
var jQuery = function(selector, context) {
  return  jQuery.prototype.init()
}
jQuery.prototype = {
  init: function() {
    this.age = 3
    return this;
  },
  webName: function() {},
}