jquery無new構建學習筆記

當我們想要建立乙個物件，我們可能使用new方法去構建乙個物件，那按道理jquery也是乙個物件，應該也是用new jquery()來構建呀為什麼我們建立jquery物件不用new jquery()而是直接使用類似$(ele)的方式去構建出來乙個jquery物件呢？其實內部還是使用了new來構建的，只是jquery內部幫我們構建了而已，請看下面**

function
jquery(selector, context) 
jquery.prototype =

直接這樣內部使用new來構建jquery，很明顯是有問題的，這樣的話就形成了死迴圈。為了解決死迴圈的問題，請看下面**：

function
jquery(selector, context) 
jquery.prototype =
}var a =jquery();
var b =jquery();
console.log(a.version); 
console.log(a.name); //
lina.name = "na";
console.log(b.name); 
//na

死迴圈的問題確實解決了，但是又發現了新的問題，可以看到a和b兩個物件的屬性是公用的,我修改a.name屬性為na，b.name屬性也跟著變為了na，其原因就是this都是指向jquery的

為了解決這個問題，我們可以每次呼叫jquery()的時候都構建乙個新的物件，改進**如下：

function
jquery(selector, context) 
jquery.prototype =
}var a =jquery();
var b =jquery();
console.log(a.version); 
//undefined
console.log(a.name); //
lina.name = "na";
console.log(b.name); 
//na

這樣處理之後，屬性共享的問題已經解決了，每個物件都有各自的屬性，可以自由修改，每個物件互不影響，但是又又又發現了新的問題，可以看到我們控制台列印a.version這個屬性的時候是讀取不到這個屬性的，原因就在於此時jquery.prototype和jquery.prototype.init.prototype是互不相干的，我們建立的是jquery.prototype.init物件,所以只能讀到jquery.prototype.init.prototype上的屬性而讀取不到jquery.prototype上的屬性的(該例指version這個屬性)，解決辦法很簡單，就是把jquery.prototype賦值給jquery.prototype.init.prototype，這樣就相當於把jquery原型上的屬性全部賦值到了jquery.init的原型上，請看下面**：

function
jquery(selector, context) 
jquery.prototype =
}jquery.prototype.init.prototype = jquery.prototype; //
畫龍點睛之筆
var a =jquery();
var b =jquery();
console.log(a.version); 
console.log(a.name); //
lina.name = "na";
console.log(b.name); 
//na

可以看到，我們控制台列印a物件的version屬性，已經可以讀取並且列印出來了。

至此，已經完成了jquery的無new構建。

ps：jquery.fn其實就是jquery的prototype，jquery原始碼可以看到該條語句：jquery.fn = jquery.prototype = {};

$()和jquery()其實是一樣的，jquery原始碼可以看到該條語句： window.jquery = window.$ = jquery;

jquery無new構建學習筆記

jquery無new構建學習筆記

JQ原始碼解析（二）無 new 構建 JQ 物件

無重新整理分頁jquery

jquery無new構建學習筆記

jquery無new構建學習筆記

JQ原始碼解析（二）無 new 構建 JQ 物件

無重新整理分頁jquery

相關推薦