JavaScript的面向?qū)ο蠓椒ㄒ约安顒e
更新時間:2008年03月31日 13:46:25 作者:
JS作為一種動態(tài)語言,在語法上有相當(dāng)大的自由度,所以造成了一種功能,有N種寫法的局面。
在JS中實現(xiàn)OOP,一般來說有兩種方法:
第一種:使用this關(guān)鍵字
function Class1()
{
this.onclick = function(e)
{
for (var i=0; i < 1000; i++)
{
var a = new Date();
}
}
}
使用this.的方法可以很靈活地給對象添加屬性和方法,而且和大部分的OOP語言都相似,甚至在運行中都可以添加。
第二種:使用prototype關(guān)鍵字
function clickFunc(e)
{
for (var i=0; i < 1000; i++)
{
var a = new Date();
}
}
function Class2()
{
}
Class2.prototype.onclick = clickFunc;
這種用法上來講就沒有第一種顯得靈活。不過在一個對象new出來之前,也是一樣可以隨時添加一個對象的屬性和方法。
可是他們并不是相等的,相對來說,我更喜歡第一種,因為第一種方法相對比較集中,比較容易閱讀代碼。但是在運行的時候,他們運行的效率卻差別相當(dāng)?shù)卮蟆R韵伦屛覀兛匆幌聹y試代碼吧:
var total = new Array();
function Test1()
{
var a = new Date();
for (var i=0; i < 10000; i++)
{
var c = new Class1();
//total.push(c);
}
var b = new Date();
alert(b.getTime()-a.getTime());
}
function Test2()
{
var a = new Date();
for (var i=0; i < 10000; i++)
{
var c = new Class2();
//total.push(c);
}
var b = new Date();
alert(b.getTime()-a.getTime());
}
第一步作執(zhí)行時間的測試:發(fā)現(xiàn)Test1()需要142ms,而Test2()僅需50ms.發(fā)現(xiàn)時間效率上來說,prototype的方法相對this來說,更加高效。
第二步作內(nèi)存占用的測試,把total.push(c);這行的注釋去掉,之所以要把它們加入到數(shù)組里面去,防止創(chuàng)建的時候,對象比較多的時候,沒有被引用的對象被GC了。結(jié)果發(fā)現(xiàn)差距不是一般的大,第一種方法要占用二三十M的內(nèi)存,而第二種只需要一百多K。
成因推斷:
在處理這兩種代碼的時候,第一種,JS的解析器,給每個對象都創(chuàng)建一個單獨的方法,這樣增加了內(nèi)存的開銷,同時創(chuàng)建方法的時候,增加了運行時間。第二種,JS的解析器和大部分的OOP編譯器一樣的,把對象的數(shù)據(jù)段和方法段分開存儲了,對于對象的私有數(shù)據(jù),則是每個對象一份,而這些方法,則是放在公共的方法段里,所以可以減少運行時間和內(nèi)存的開銷。
function Class1()
{
this.onclick = function(e)
{
for (var i=0; i < 1000; i++)
{
var a = new Date();
}
}
}
使用this.的方法可以很靈活地給對象添加屬性和方法,而且和大部分的OOP語言都相似,甚至在運行中都可以添加。
第二種:使用prototype關(guān)鍵字
function clickFunc(e)
{
for (var i=0; i < 1000; i++)
{
var a = new Date();
}
}
function Class2()
{
}
Class2.prototype.onclick = clickFunc;
這種用法上來講就沒有第一種顯得靈活。不過在一個對象new出來之前,也是一樣可以隨時添加一個對象的屬性和方法。
可是他們并不是相等的,相對來說,我更喜歡第一種,因為第一種方法相對比較集中,比較容易閱讀代碼。但是在運行的時候,他們運行的效率卻差別相當(dāng)?shù)卮蟆R韵伦屛覀兛匆幌聹y試代碼吧:
var total = new Array();
function Test1()
{
var a = new Date();
for (var i=0; i < 10000; i++)
{
var c = new Class1();
//total.push(c);
}
var b = new Date();
alert(b.getTime()-a.getTime());
}
function Test2()
{
var a = new Date();
for (var i=0; i < 10000; i++)
{
var c = new Class2();
//total.push(c);
}
var b = new Date();
alert(b.getTime()-a.getTime());
}
第一步作執(zhí)行時間的測試:發(fā)現(xiàn)Test1()需要142ms,而Test2()僅需50ms.發(fā)現(xiàn)時間效率上來說,prototype的方法相對this來說,更加高效。
第二步作內(nèi)存占用的測試,把total.push(c);這行的注釋去掉,之所以要把它們加入到數(shù)組里面去,防止創(chuàng)建的時候,對象比較多的時候,沒有被引用的對象被GC了。結(jié)果發(fā)現(xiàn)差距不是一般的大,第一種方法要占用二三十M的內(nèi)存,而第二種只需要一百多K。
成因推斷:
在處理這兩種代碼的時候,第一種,JS的解析器,給每個對象都創(chuàng)建一個單獨的方法,這樣增加了內(nèi)存的開銷,同時創(chuàng)建方法的時候,增加了運行時間。第二種,JS的解析器和大部分的OOP編譯器一樣的,把對象的數(shù)據(jù)段和方法段分開存儲了,對于對象的私有數(shù)據(jù),則是每個對象一份,而這些方法,則是放在公共的方法段里,所以可以減少運行時間和內(nèi)存的開銷。
相關(guān)文章
JavaScript 工具庫 Cloudgamer JavaScript Library v0.1 發(fā)布
研究了一年多的js,也差不多寫一個自己的js庫了。 我寫這個不算框架,只是一個小型的js工具庫,所以我用的名字是Library。2009-10-10
javascript中類的定義及其方式(《javascript高級程序設(shè)計》學(xué)習(xí)筆記)
javascript也是一種面向?qū)ο蟮木幊陶Z言。但是javascript中的類相關(guān)的東西(類的定義,原型鏈,繼承等)卻不是很好理解,特別是繼承。2011-07-07
JS類定義原型方法的兩種實現(xiàn)的區(qū)別評論很多
JS類定義原型方法的兩種實現(xiàn)的區(qū)別評論很多...
2007-09-09
javascript最常用與實用的創(chuàng)建類的代碼
組合構(gòu)造函數(shù)模式和原型模式
2010-08-08
javascript 面向?qū)ο?實現(xiàn)namespace,class,繼承,重載
這幾天老大天天嚷嚷要重構(gòu)我們寫的javascript,抱怨代碼太混亂,可讀性差,維護困難,要求javascript也按面對象的模型來重構(gòu)。
2009-10-10 
