通過jQuery原始碼學習javascript(二)

通過jQuery原始碼學習javascript(二)

巧妙1:函式

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

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


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

巧妙2:擴充套件原型

  何為原型物件?我給出一篇博文大家可以去了解一下//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:使用工廠方法來建立一個例項

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

(new jQuery()).test();
  jQuery原始碼使用了很柔和的方法,也是大家比較熟悉的工廠方法,進行呼叫。
複製程式碼 程式碼如下:
(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 ,給我介紹了一本不錯的書。如果大家能補充一下,那就再好不過了。

您可能感興趣的文章:

jQuery原始碼解讀之addClass()方法分析jQuery原始碼解讀之hasClass()方法分析jQuery原始碼解讀之removeAttr()方法分析jQuery原始碼分析之jQuery.fn.each與jQuery.each用法從JQuery原始碼分析JavaScript函式的apply方法與call方法jQuery原始碼分析之jQuery中的迴圈技巧詳解通過jQuery原始碼學習javascript(三)jQuery中removeClass()方法用法例項使用JS實現jQuery的addClass, removeClass, hasClass函式功能jQuery原始碼解讀之removeClass()方法分析