快捷導(dǎo)航

通過jQuery源碼學(xué)習(xí)javascript(二)

更新時間：2012年12月27日 16:01:41 作者：

昨天寫了篇通過jQuery源碼學(xué)習(xí)javascript（一），里面有一個定義對象C的方法，我早期也沒有太注意這個方面的技術(shù)細(xì)節(jié)。后來我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享

巧妙1：函數(shù)

　　在javascript代碼中函數(shù)是個不可多得的人才。
　　　　♥ 它可以歸置代碼段，封裝相對獨立的功能。
　　　　♥ 它也可以實現(xiàn)類，注入ＯＯＰ思想。
　　jQuery就是一個函數(shù)，你也可以把它當(dāng)成類（呵呵，本身就是類）。

復(fù)制代碼代碼如下:

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

上面的空函數(shù)就是所謂的構(gòu)造函數(shù)，構(gòu)造函數(shù)在面向?qū)ο笳Z言中是類的一個基本方法。

巧妙2：擴展原型

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

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

　　原型對象是javascript實現(xiàn)繼承的基本機制。

復(fù)制代碼代碼如下:

 
(function(){ 
var jQuery = function() { 
// 函數(shù)體 
} 
jQuery.fn = jQuery.prototype = { 
// 擴展原型對象 
jquery: "1.8.3", 
test: function() { 
console.log('test'); 
} 
} 
window.jQuery = window.$ = jQuery; 
})(); 

(new jQuery()).test(); 

巧妙3：使用工廠方法來創(chuàng)建一個實例

　　上面的方法必須使用下面的方法才能進行調(diào)用，這樣就會產(chǎn)生很多對象，從而浪費內(nèi)存消耗。

(new jQuery()).test();
　　jQuery源碼使用了很柔和的方法，也是大家比較熟悉的工廠方法，進行調(diào)用。

復(fù)制代碼代碼如下:

 
(function(){ 
var jQuery = function() { 
// 函數(shù)體 
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函數(shù)體直接返回該對象——我用this

復(fù)制代碼代碼如下:

 
(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()); 

輸出結(jié)果

發(fā)現(xiàn)這里的this指向Window對象?！　?
假想2：讓jQuery函數(shù)體直接返回類的實例。

復(fù)制代碼代碼如下:

 
(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()); 

輸出結(jié)果

發(fā)現(xiàn)上面是一個遞歸死循環(huán)，出現(xiàn)內(nèi)存外溢。

巧妙4：分隔作用域

思考1：init()方法返回的this作用域是什么？

復(fù)制代碼代碼如下:

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

輸出結(jié)果

init()方法中的this作用域：this關(guān)鍵字引用了init()函數(shù)作用域所在的對象，同時也能夠訪問上一級對象jQuery.fn對象的作用?！@種思路會破壞作用域的獨立性，對于jQuery框架來說，很可能造成消極影響。

思考2：怎么把init()中的this從jQuery.fn對象中分隔出來？——實例化init初始化類型。

復(fù)制代碼代碼如下:

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

輸出結(jié)果

通過實例化init()初始化類型，限定了init()方法里的this，只在init()函數(shù)內(nèi)活動，不讓它超出范圍。

巧妙5：原型傳遞

思考1：在巧妙4中，我們把init()中的this從jquery.fn對象中分隔出來。那我們?nèi)绾文茏龅奖ＷC“巧妙4”的基礎(chǔ)上，還能訪問jQuery原型對象呢？——原型傳遞。

讓jQuery的原型對象覆蓋init()構(gòu)造器的原型對象。

復(fù)制代碼代碼如下:

jQuery.fn.init.prototype = jQuery.fn;

全部代碼：

復(fù)制代碼代碼如下:

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