透過jQuery原始碼學習javascript(二)_jquery

巧妙1：函數

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

複製程式碼 程式碼如下:

(function(){ jQuery = function() {
// 函數體
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery);

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


巧妙2：擴充原型
　　何為原型物件？我給一篇部落格文章大家可以去了解
http://www.jb51.net/article/32857.htm。
　　javascript為所有函數綁定一個prototype屬性，由這個屬性指向一個原型物件。我們在原型物件中定義類別的繼承屬性和方法等。

　　原型物件是javascript實作繼承的基本機制。

複製程式碼 程式碼如下:

(function(){


(function(){
var. () {
// 函數體
}
jQuery.fn = jQuery.prototype = {
// 擴充原型物件
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();

(new jQuery()).test();


巧妙3：使用工廠方法來建立一個實例

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

(new jQuery()).test();

　　jQuery源碼使用了很柔和的方法，也是大家比較熟悉的工廠方法，進行呼叫。 複製程式碼

程式碼如下:


(function(){


(function(){
var. () {
// 函數體
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴充原型物件
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. = jQuery.prototype = {
// 擴充原型物件
jquery: "1.8.3",
test: function() {

console.log('test');
}
}
window.jQuery = window.$ = jQuery;

})(); console.log(jQuery());

輸出結果

發現這裡的this指向Window物件。　　 假想2：讓jQuery函數體直接傳回類別的實例。

複製程式碼


程式碼如下:


(function(){ 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(){


(function(){
var. () {
// 函數體
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 = window.jQuery = window.jQuery = window.jQuery = window.jQuery = window.jQuery = window.jQuery = window.jQuery = window.jQuery = window.jQuery = 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.protofntype;

全部程式碼： 複製程式碼

程式碼如下:



程式碼如下:



程式碼如下:



程式碼如下:



程式碼如下：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 ，給我介紹了一本不錯的書。如果大家能補充​​一下，那就再好不過了。