通過(guò)jQuery源碼學(xué)習(xí)javascript(二)
更新時(shí)間：2012年12月27日 16:01:41 作者：
昨天寫了篇通過(guò)jQuery源碼學(xué)習(xí)javascript（一），里面有一個(gè)定義對(duì)象C的方法，我早期也沒(méi)有太注意這個(gè)方面的技術(shù)細(xì)節(jié)。后來(lái)我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享
巧妙1：函數(shù)
在javascript代碼中函數(shù)是個(gè)不可多得的人才。
♥ 它可以歸置代碼段，封裝相對(duì)獨(dú)立的功能。
♥ 它也可以實(shí)現(xiàn)類，注入ＯＯＰ思想。
jQuery就是一個(gè)函數(shù)，你也可以把它當(dāng)成類（呵呵，本身就是類）。
(function(){
var jQuery = function() {
// 函數(shù)體
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery);
上面的空函數(shù)就是所謂的構(gòu)造函數(shù)，構(gòu)造函數(shù)在面向?qū)ο笳Z(yǔ)言中是類的一個(gè)基本方法。
巧妙2：擴(kuò)展原型
何為原型對(duì)象？我給出一篇博文大家可以去了解一下http://www.fzitv.net/article/32857.htm。
javascript為所有函數(shù)綁定一個(gè)prototype屬性，由這個(gè)屬性指向一個(gè)原型對(duì)象。我們?cè)谠蛯?duì)象中定義類的繼承屬性和方法等。
原型對(duì)象是javascript實(shí)現(xiàn)繼承的基本機(jī)制。
(function(){
var jQuery = function() {
// 函數(shù)體
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
(new jQuery()).test();
巧妙3：使用工廠方法來(lái)創(chuàng)建一個(gè)實(shí)例
上面的方法必須使用下面的方法才能進(jìn)行調(diào)用，這樣就會(huì)產(chǎn)生很多對(duì)象，從而浪費(fèi)內(nèi)存消耗。
(new jQuery()).test();
jQuery源碼使用了很柔和的方法，也是大家比較熟悉的工廠方法，進(jìn)行調(diào)用。
(function(){
var jQuery = function() {
// 函數(shù)體
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
init: function() {
return this;
},
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
jQuery().test();
(function(){
var jQuery = function() {
return this;
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());
輸出結(jié)果
假想2：讓jQuery函數(shù)體直接返回類的實(shí)例。
(function(){
var jQuery = function() {
return new jQuery();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());
輸出結(jié)果
巧妙4：分隔作用域
思考1：init()方法返回的this作用域是什么？
(function(){
var jQuery = function() {
// 函數(shù)體
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
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ù)作用域所在的對(duì)象，同時(shí)也能夠訪問(wèn)上一級(jí)對(duì)象jQuery.fn對(duì)象的作用?！@種思路會(huì)破壞作用域的獨(dú)立性，對(duì)于jQuery框架來(lái)說(shuō)，很可能造成消極影響。
思考2：怎么把init()中的this從jQuery.fn對(duì)象中分隔出來(lái)？——實(shí)例化init初始化類型。
(function(){
var jQuery = function() {
// 函數(shù)體
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
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é)果
通過(guò)實(shí)例化init()初始化類型，限定了init()方法里的this，只在init()函數(shù)內(nèi)活動(dòng)，不讓它超出范圍。
巧妙5：原型傳遞
思考1：在巧妙4中，我們把init()中的this從jquery.fn對(duì)象中分隔出來(lái)。那我們?nèi)绾文茏龅奖ＷC“巧妙4”的基礎(chǔ)上，還能訪問(wèn)jQuery原型對(duì)象呢？——原型傳遞。
讓jQuery的原型對(duì)象覆蓋init()構(gòu)造器的原型對(duì)象。
jQuery.fn.init.prototype = jQuery.fn;
全部代碼：
(function(){
var jQuery = function() {
// 函數(shù)體
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
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);
輸出結(jié)果
把init()對(duì)象的prototype指針指向jQuery.fn。——這樣init()里的this繼承了jQuery.fn原型對(duì)象定義的方法和屬性。
總結(jié)
感謝博友的留言，尤其是puni ，給我介紹了一本不錯(cuò)的書。如果大家能補(bǔ)充一下，那就再好不過(guò)了。
在javascript代碼中函數(shù)是個(gè)不可多得的人才。
♥ 它可以歸置代碼段，封裝相對(duì)獨(dú)立的功能。
♥ 它也可以實(shí)現(xiàn)類，注入ＯＯＰ思想。
jQuery就是一個(gè)函數(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(yǔ)言中是類的一個(gè)基本方法。
巧妙2：擴(kuò)展原型
何為原型對(duì)象？我給出一篇博文大家可以去了解一下http://www.fzitv.net/article/32857.htm。
javascript為所有函數(shù)綁定一個(gè)prototype屬性，由這個(gè)屬性指向一個(gè)原型對(duì)象。我們?cè)谠蛯?duì)象中定義類的繼承屬性和方法等。
原型對(duì)象是javascript實(shí)現(xiàn)繼承的基本機(jī)制。
復(fù)制代碼 代碼如下:
(function(){
var jQuery = function() {
// 函數(shù)體
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
(new jQuery()).test();
巧妙3：使用工廠方法來(lái)創(chuàng)建一個(gè)實(shí)例
上面的方法必須使用下面的方法才能進(jìn)行調(diào)用，這樣就會(huì)產(chǎn)生很多對(duì)象，從而浪費(fèi)內(nèi)存消耗。
(new jQuery()).test();
jQuery源碼使用了很柔和的方法，也是大家比較熟悉的工廠方法，進(jìn)行調(diào)用。
復(fù)制代碼 代碼如下:
(function(){
var jQuery = function() {
// 函數(shù)體
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
init: function() {
return this;
},
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
jQuery().test();
復(fù)制代碼 代碼如下:
(function(){
var jQuery = function() {
return this;
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());
輸出結(jié)果
假想2：讓jQuery函數(shù)體直接返回類的實(shí)例。
復(fù)制代碼 代碼如下:
(function(){
var jQuery = function() {
return new jQuery();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
jquery: "1.8.3",
test: function() {
console.log('test');
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());
輸出結(jié)果
巧妙4：分隔作用域
思考1：init()方法返回的this作用域是什么？
復(fù)制代碼 代碼如下:
(function(){
var jQuery = function() {
// 函數(shù)體
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
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ù)作用域所在的對(duì)象，同時(shí)也能夠訪問(wèn)上一級(jí)對(duì)象jQuery.fn對(duì)象的作用?！@種思路會(huì)破壞作用域的獨(dú)立性，對(duì)于jQuery框架來(lái)說(shuō)，很可能造成消極影響。
思考2：怎么把init()中的this從jQuery.fn對(duì)象中分隔出來(lái)？——實(shí)例化init初始化類型。
復(fù)制代碼 代碼如下:
(function(){
var jQuery = function() {
// 函數(shù)體
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
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é)果
通過(guò)實(shí)例化init()初始化類型，限定了init()方法里的this，只在init()函數(shù)內(nèi)活動(dòng)，不讓它超出范圍。
巧妙5：原型傳遞
思考1：在巧妙4中，我們把init()中的this從jquery.fn對(duì)象中分隔出來(lái)。那我們?nèi)绾文茏龅奖ＷC“巧妙4”的基礎(chǔ)上，還能訪問(wèn)jQuery原型對(duì)象呢？——原型傳遞。
讓jQuery的原型對(duì)象覆蓋init()構(gòu)造器的原型對(duì)象。
復(fù)制代碼 代碼如下:
jQuery.fn.init.prototype = jQuery.fn;
全部代碼：
復(fù)制代碼 代碼如下:
(function(){
var jQuery = function() {
// 函數(shù)體
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 擴(kuò)展原型對(duì)象
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);
輸出結(jié)果
把init()對(duì)象的prototype指針指向jQuery.fn。——這樣init()里的this繼承了jQuery.fn原型對(duì)象定義的方法和屬性。
總結(jié)
感謝博友的留言，尤其是puni ，給我介紹了一本不錯(cuò)的書。如果大家能補(bǔ)充一下，那就再好不過(guò)了。
您可能感興趣的文章:
- jQuery源碼解讀之a(chǎn)ddClass()方法分析
- jQuery源碼解讀之hasClass()方法分析
- jQuery源碼解讀之removeAttr()方法分析
- jQuery源碼分析之jQuery.fn.each與jQuery.each用法
- 從JQuery源碼分析JavaScript函數(shù)的apply方法與call方法
- jQuery源碼分析之jQuery中的循環(huán)技巧詳解
- 通過(guò)jQuery源碼學(xué)習(xí)javascript(三)
- jQuery中removeClass()方法用法實(shí)例
- 使用JS實(shí)現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
- jQuery源碼解讀之removeClass()方法分析
相關(guān)文章
jQuery對(duì)象的selector屬性用法實(shí)例
這篇文章主要介紹了jQuery對(duì)象的selector屬性用法,實(shí)例分析了selector屬性返回選擇器的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標(biāo)hover事件的響應(yīng)及頁(yè)面元素的動(dòng)態(tài)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
本篇文章主要是對(duì)判斷jQuery當(dāng)前元素是隱藏還是顯示的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下2016-11-11
jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
下面小編就為大家?guī)?lái)一篇jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
基于jquery的動(dòng)畫效果代碼，挺有意思的，需要的朋友可以參考下2012-07-07
為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
下面小編就為大家?guī)?lái)一篇為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶名是否存在的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-04-04
jQuery的3種請(qǐng)求方式$.post,$.get,$.getJSON
這篇文章主要介紹了jQuery的3種請(qǐng)求方式$.post,$.get,$.getJSON,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了jQuery切換所有復(fù)選框選中狀態(tài)的方法,可實(shí)現(xiàn)批量切換復(fù)選框選中狀態(tài)的功能,需要的朋友可以參考下2015-07-07
jQuery Select(單選) 模擬插件 V1.3.62 改進(jìn)版
改進(jìn)jQuery Select(單選) 模擬插件 V1.3.6，增加mouseover事件2010-07-07