JavaScript中的prototype 構(gòu)造函數(shù)的原型對象

字號:


    JavaScript中的prototype,即構(gòu)造函數(shù)的原型對象,我想對于使用過JavaScript oo模式編程的你來說,肯定都能很好的利用prototype的特性來編寫出優(yōu)美的面向?qū)ο蟮拇a,因?yàn)樗拇_很好用。但是你真的足夠了解prototype嗎?
    首先我覺得,在分析prototype之前,應(yīng)該先了解為什么要使用prototype來實(shí)現(xiàn)繼承,而并不是把所有屬性寫到構(gòu)造函數(shù)內(nèi)部,那么這樣做優(yōu)勢體現(xiàn)在哪里呢,如果你跟我有一樣的困惑,請看如下兩段代碼:
    [js]代碼:
    /*代碼1*/
    var F = function(){
    this.a = 1;
    this.b = 2;
    this.c = 3;
    this.d = 4;
    this.e = 5;
    this.f = 6;
    };
    for(var i=0;i<100000;i++){
    eval('var f' + i + '= new F;');
    }
    /*代碼2*/
    var F = function(){};
    F.prototype = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
    f: 6
    };
    for(var i=0;i<100000;i++){
    eval('var f' + i + '= new F;');
    }
    在瀏覽器中分別執(zhí)行兩段代碼,觀察瀏覽器的內(nèi)存占用情況(數(shù)據(jù)量比較大,等待腳本執(zhí)行完畢,瀏覽器穩(wěn)定后的數(shù)據(jù)),如下圖:
    
    從圖片中的數(shù)據(jù)不難看出,在Firefox中,把所有屬性全部寫到構(gòu)造的原型對象中,生成100000個(gè)實(shí)例對象時(shí),占用內(nèi)存會比把所有屬性全部寫到構(gòu)造內(nèi)部少15M,而在IE中,這個(gè)差距竟然達(dá)到97M,匪夷所思啊,神奇的IE。這也就是為什么寫oo代碼時(shí),總是喜歡把類的一些屬性和方法寫到它的原型對象中,在達(dá)到同樣目的的前提下節(jié)省內(nèi)存的使用率,我想沒有哪一個(gè)人愿意拒絕這樣的做法。