通過jQuery源碼學習javascript(二)

巧妙1：函數

　　在javascript代碼中函數是個不可多得的人才。
　　　　 它可以歸置程式碼片段，封裝相對獨立的功能。
　　　　 它也可以實作類別，注入ＯＯＰ思想。
　　jQuery就是一個函數，你也可以把它當成類（呵呵，本身就是類）。

複製代碼 代碼如下:(function(){
var jQuery = function() {
// 函數體
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery);

上面的空函數就是所謂的建構函式，建構函式在物件導向語言中是類的一個基本方法。

巧妙2：擴充原型

　　何為原型對象？我給出一篇博文大家可以去瞭解一下http://www.jb51.net/article/32857.htm。

　　javascript為所有函數綁定一個prototype屬性，由這個屬性指向一個原型對象。我們在原型對象中定義類的繼承屬性和方法等。

　　原型對象是javascript實現繼承的基本機制。 複製代碼 代碼如下:(function(){
var jQuery = function() {
// 函數體
}
jQuery.fn = jQuery.prototype = {
// 擴充原型對象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();

(new jQuery()).test();

巧妙3：使用Factory 方法來建立一個執行個體

　　上面的方法必須使用下面的方法才能進行調用，這樣就會產生很多個物件，從而浪費記憶體消耗。

(new jQuery()).test();
　　jQuery源碼使用了很柔和的方法，也是大家比較熟悉的Factory 方法，進行調用。 複製代碼 代碼如下:(function(){
var jQuery = function() {
// 函數體
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴充原型對象
jquery: "1.8.3",
init: function() {
return this;
},
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
jQuery().test();

假想1：讓jQuery函數體直接返回該對象——我用this
複製代碼 代碼如下:(function(){
var jQuery = function() {
return this;
}
jQuery.fn = jQuery.prototype = {
// 擴充原型對象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());

輸出結果

發現這裡的this指向Window對象。　　
假想2：讓jQuery函數體直接返回類的執行個體。 複製代碼 代碼如下:(function(){
var jQuery = function() {
return new jQuery();
}
jQuery.fn = jQuery.prototype = {
// 擴充原型對象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());

輸出結果

發現上面是一個遞迴死迴圈，出現記憶體外溢。

巧妙4：分隔範圍

思考1：init()方法返回的this範圍是什嗎？ 複製代碼 代碼如下:(function(){
var jQuery = function() {
// 函數體
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴充原型對象
jquery: "1.8.3",
init: function() {
this.init_jquery = '2.0';
return this;
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

輸出結果

init()方法中的this範圍：this關鍵字引用了init()函數範圍所在的對象，同時也能夠訪問上一級對象jQuery.fn對象的作用。——這種思路會破壞範圍的獨立性，對於jQuery架構來說，很可能造成消極影響。

思考2：怎麼把init()中的this從jQuery.fn對象中分隔出來？——執行個體化init初始化類型。 複製代碼 代碼如下:(function(){
var jQuery = function() {
// 函數體
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴充原型對象
jquery: "1.8.3",
init: function() {
this.init_jquery = '2.0';
return this;
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

輸出結果

通過執行個體化init()初始化類型，限定了init()方法裡的this，只在init()函數內活動，不讓它超出範圍。

巧妙5：原型傳遞

思考1：在巧妙4中，我們把init()中的this從jquery.fn對象中分隔出來。那我們如何能做到保證“巧妙4”的基礎上，還能訪問jQuery原型對象呢？——原型傳遞。

讓jQuery的原型對象覆蓋init()構造器的原型對象。 複製代碼 代碼如下:jQuery.fn.init.prototype = jQuery.fn;

全部代碼： 複製代碼 代碼如下:(function(){
var jQuery = function() {
// 函數體
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴充原型對象
jquery: "1.8.3",
init: function() {
this.init_jquery = '2.0';
return this;
}
}
jQuery.fn.init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

輸出結果

妙棋

　　把init()對象的prototype指標指向jQuery.fn。——這樣init()裡的this繼承了jQuery.fn原型對象定義的方法和屬性。

總結

　　感謝博友的留言，尤其是puni ，給我介紹了一本不錯的書。如果大家能補充一下，那就再好不過了。