JavaScript的面向?qū)ο蠓椒ㄒ约安顒e
更新時(shí)間:2008年03月31日 13:46:25 作者:
JS作為一種動(dòng)態(tài)語言,在語法上有相當(dāng)大的自由度,所以造成了一種功能,有N種寫法的局面。
在JS中實(shí)現(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語言都相似,甚至在運(yùn)行中都可以添加。
第二種:使用prototype關(guān)鍵字
function clickFunc(e)
{
for (var i=0; i < 1000; i++)
{
var a = new Date();
}
}
function Class2()
{
}
Class2.prototype.onclick = clickFunc;
這種用法上來講就沒有第一種顯得靈活。不過在一個(gè)對象new出來之前,也是一樣可以隨時(shí)添加一個(gè)對象的屬性和方法。
可是他們并不是相等的,相對來說,我更喜歡第一種,因?yàn)榈谝环N方法相對比較集中,比較容易閱讀代碼。但是在運(yùn)行的時(shí)候,他們運(yùn)行的效率卻差別相當(dāng)?shù)卮?。以下讓我們看一下測試代碼吧:
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í)行時(shí)間的測試:發(fā)現(xiàn)Test1()需要142ms,而Test2()僅需50ms.發(fā)現(xiàn)時(shí)間效率上來說,prototype的方法相對this來說,更加高效。
第二步作內(nèi)存占用的測試,把total.push(c);這行的注釋去掉,之所以要把它們加入到數(shù)組里面去,防止創(chuàng)建的時(shí)候,對象比較多的時(shí)候,沒有被引用的對象被GC了。結(jié)果發(fā)現(xiàn)差距不是一般的大,第一種方法要占用二三十M的內(nèi)存,而第二種只需要一百多K。
成因推斷:
在處理這兩種代碼的時(shí)候,第一種,JS的解析器,給每個(gè)對象都創(chuàng)建一個(gè)單獨(dú)的方法,這樣增加了內(nèi)存的開銷,同時(shí)創(chuàng)建方法的時(shí)候,增加了運(yùn)行時(shí)間。第二種,JS的解析器和大部分的OOP編譯器一樣的,把對象的數(shù)據(jù)段和方法段分開存儲了,對于對象的私有數(shù)據(jù),則是每個(gè)對象一份,而這些方法,則是放在公共的方法段里,所以可以減少運(yùn)行時(shí)間和內(nèi)存的開銷。
function Class1()
{
this.onclick = function(e)
{
for (var i=0; i < 1000; i++)
{
var a = new Date();
}
}
}
使用this.的方法可以很靈活地給對象添加屬性和方法,而且和大部分的OOP語言都相似,甚至在運(yùn)行中都可以添加。
第二種:使用prototype關(guān)鍵字
function clickFunc(e)
{
for (var i=0; i < 1000; i++)
{
var a = new Date();
}
}
function Class2()
{
}
Class2.prototype.onclick = clickFunc;
這種用法上來講就沒有第一種顯得靈活。不過在一個(gè)對象new出來之前,也是一樣可以隨時(shí)添加一個(gè)對象的屬性和方法。
可是他們并不是相等的,相對來說,我更喜歡第一種,因?yàn)榈谝环N方法相對比較集中,比較容易閱讀代碼。但是在運(yùn)行的時(shí)候,他們運(yùn)行的效率卻差別相當(dāng)?shù)卮?。以下讓我們看一下測試代碼吧:
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í)行時(shí)間的測試:發(fā)現(xiàn)Test1()需要142ms,而Test2()僅需50ms.發(fā)現(xiàn)時(shí)間效率上來說,prototype的方法相對this來說,更加高效。
第二步作內(nèi)存占用的測試,把total.push(c);這行的注釋去掉,之所以要把它們加入到數(shù)組里面去,防止創(chuàng)建的時(shí)候,對象比較多的時(shí)候,沒有被引用的對象被GC了。結(jié)果發(fā)現(xiàn)差距不是一般的大,第一種方法要占用二三十M的內(nèi)存,而第二種只需要一百多K。
成因推斷:
在處理這兩種代碼的時(shí)候,第一種,JS的解析器,給每個(gè)對象都創(chuàng)建一個(gè)單獨(dú)的方法,這樣增加了內(nèi)存的開銷,同時(shí)創(chuàng)建方法的時(shí)候,增加了運(yùn)行時(shí)間。第二種,JS的解析器和大部分的OOP編譯器一樣的,把對象的數(shù)據(jù)段和方法段分開存儲了,對于對象的私有數(shù)據(jù),則是每個(gè)對象一份,而這些方法,則是放在公共的方法段里,所以可以減少運(yùn)行時(shí)間和內(nèi)存的開銷。
相關(guān)文章
javascript最常用與實(shí)用的創(chuàng)建類的代碼
組合構(gòu)造函數(shù)模式和原型模式2010-08-08
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮男g(shù)語
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮男g(shù)語,學(xué)習(xí)面向?qū)ο笤O(shè)計(jì)的朋友可以參考下。2010-11-11
javascript 面向?qū)ο缶幊? function是方法(函數(shù))
在進(jìn)行編程時(shí),必免不了要碰到復(fù)雜的功能。初學(xué)者最怕復(fù)雜的功能,因?yàn)椴荒軌蚝芎玫倪M(jìn)行功能邊界劃分,只能一大串if、循環(huán)加case堆疊在一起,結(jié)果出來的程序自己看著暈,別人看著更暈。2009-09-09
JavaScript為對象原型prototype添加屬性的兩種方式
為對象原型prototype添加屬性的的方法, 需要的朋友可以參考下。2010-08-08

