Javascript玩轉Prototype(二)

來源:互聯網
上載者:User

上文一直在羅嗦GOF的原型模式,在本文中講開始正式討論Javascript的Prototype。對於Javascript的初學者來說,Prototype是個蠻高深的話題,其實並不盡然。

我說不盡然,意思是說理解Prototype的一般用法很簡單。但是真正能做到融會貫通理解Prototype確實是件很難的事情。

今天我就從Prototype的基本開始講。上文中我講了原型模式。其實在Javascript中原型也是這個意思。Javascript中對象的原型屬性的解釋是:返回物件類型原型的引用。這是一個暈人的解釋。其實就是指定了一個需要複製的對象。

文字再多也不如代碼,上代碼,說最簡單的,任何類都繼承自Object類:

function A()

{    }

A.prototype=new Object();

其實這樣就相當於Object對象是A的一個原型,這樣就相當於了把Object對象的屬性和方法複製到了A上,和原型模式的精髓一樣吧!

好,大概瞭解了prototype的基本用法,我們來看看原型究竟有什麼用處。

  1. 最簡單的用法,動態擴充類的方法和屬性。

    function People()

    {

            this.Jump=function(){

                alert("I can jump");

    }

    }

    現在要擴充方法:

    People.prototype.Run=function(){

            alert("I can run,too");

    }

    好,測試下:

    var p=new People();

    p.Jump();

    p.Run();

     

     

    接下來,順帶講一下Javascript的方法種類。我個人將Javascript的方法分為三種:

    <1>類方法

    <2>對象方法

    <3>原型方法

     

    先看代碼,後講區別:

     

function People(name)

{

this.name=name;

//對象方法

this.Introduce=function(){

alert("My name is "+this.name);

}

}

//類方法

People.Run=function(){

alert("I can run");

}

//原型方法

People.prototype.IntroduceChinese=function(){

alert("我的名字是"+this.name);

}

測試下:

var p1=new People("Windking");

p1.Introduce();

People.Run();

p1.IntroduceChinese();

總結下:

        

名稱

位置

格式

類方法

類外

類名.方法名

對象方法

類內

this.方法名

原型方法

類外

類名.prototype.方法名

 

        我們用C#來做類別來講解這三個方法:

        類方法其實就是我們講的靜態方法:

        如public static void Run(){}

        而對象方法其實就是執行個體方法。

        public void Introduce(){}

    而原型方法有所不同,由於C#中不允許動態為對象增加方法,因此在C#中並不存在原型方法。原型方法處於C#的靜態方法與執行個體方法之間,通過對象調用,但是儲存的記憶體形式卻類似於靜態方法,也就是所有執行個體對象共用同一副本。

(ps:盡量將方法定義為原型方法,原型方法避免了每次調用建構函式時對屬性或方法的構造,因此比較節省空間的和時間)

  1. p1.IntroduceChinese();建立對象。

    還記得我在上一篇文章裡講的淺複製嗎?為什麼大家都喜歡批量生產?效率是最主要因素。淺複製也一樣,我們為什麼要淺複製,因為效率高。作為原型模式的Javascript應用,prototype也承擔著這樣的重任。用prototype來建立對象,要比其他方式快得多。

    看代碼例子:

    function People(name,age)

    {

            this.name=name;

            this.age=age;

    }

    var p1=new People("Xuan",22);

    var girls=[ ];

    var GirlPrototype=function(){};

    GirlPrototype.prototype=p1;

    for(var i=0;i<100000;i++)

    {

            girls[i]=new GirlPrototype();

    }

  2. 玩轉繼承:

    Prototype最大的應用其實還是在於玩轉繼承,這個在此不討論,請參加我的另一篇文章:《Javascript玩轉繼承(二)》。

    

 

好,基本的應用說完,下面我來說一下prototype的天使和魔鬼兩面。

說prototype是天使,是因為以上的幾點應用,讓Javascript增加了很大的靈活性,尤其原型繼承,更是Javascript最多的繼承方式。

說他是魔鬼,則是因為下面幾方面:

  1. 原型繼承的缺陷。請參見《Javascript玩轉繼承(二)》。
  2. 原型其實相當於原型模式中的淺複製,因此也會造成牽一髮而動全身的效果。

過於靈活。為什麼過於靈活呢?其實這點我是針對第一點來說的,能夠動態地添加屬性和方法固然是增加了靈活性。可是我們討論一種情況,100個人同時來開發一個Javascript的項目,很多沒經驗的人愛上了玩轉prototype,一個人往這個類裡加一個方法,還物件導向嗎?當然這隻是我的個人之見。如果有異議,歡迎和我討論。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.