資源描述:
《js中prototype介紹》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、JS中的prototype2011-06-0314:40by軒脈刃,?129722?閱讀,?67?評論,?收藏,?編輯JS中的phototype是JS中比較難理解的一個部分?本文基于下面幾個知識點:?1原型法設(shè)計模式在.Net中可以使用clone()來實現(xiàn)原型法原型法的主要思想是,現(xiàn)在有1個類A,我想要創(chuàng)建一個類B,這個類是以A為原型的,并且能進行擴展。我們稱B的原型為A。?2javascript的方法可以分為三類:a類方法b對象方法c原型方法例子:function?People(name){?this.name=name;?/
2、/對象方法?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.Introdu
3、ceChinese();??3obj1.func.call(obj)方法意思是將obj看成obj1,調(diào)用func方法??好了,下面一個一個問題解決:?prototype是什么含義??javascript中的每個對象都有prototype屬性,Javascript中對象的prototype屬性的解釋是:返回對象類型原型的引用。A.prototype=newB();理解prototype不應把它和繼承混淆。A的prototype為B的一個實例,可以理解A將B中的方法和屬性全部克隆了一遍。A能使用B的方法和屬性。這里強調(diào)的是克隆而不是
4、繼承。可以出現(xiàn)這種情況:A的prototype是B的實例,同時B的prototype也是A的實例。?先看一個實驗的例子:function?baseClass(){?this.showMsg?=?function()?{?????alert("baseClass::showMsg");????}}function?extendClass(){}extendClass.prototype?=?new?baseClass();varinstance?=?new?extendClass();instance.showMsg();?//?
5、顯示baseClass::showMsg我們首先定義了baseClass類,然后我們要定義extentClass,但是我們打算以baseClass的一個實例為原型,來克隆的extendClass也同時包含showMsg這個對象方法。extendClass.prototype=newbaseClass()就可以閱讀為:extendClass是以baseClass的一個實例為原型克隆創(chuàng)建的。?那么就會有一個問題,如果extendClass中本身包含有一個與baseClass的方法同名的方法會怎么樣?下面是擴展實驗2:function
6、?baseClass(){????this.showMsg?=?function()????{????????alert("baseClass::showMsg");???????}}function?extendClass(){????this.showMsg?=function?()????{????????alert("extendClass::showMsg");????}}extendClass.prototype?=?new?baseClass();varinstance?=?new?extendClass();in
7、stance.showMsg();//顯示extendClass::showMsg?實驗證明:函數(shù)運行時會先去本體的函數(shù)中去找,如果找到則運行,找不到則去prototype中尋找函數(shù)?;蛘呖梢岳斫鉃閜rototype不會克隆同名函數(shù)。?那么又會有一個新的問題:如果我想使用extendClass的一個實例instance調(diào)用baseClass的對象方法showMsg怎么辦??答案是可以使用call:extendClass.prototype?=?new?baseClass();varinstance?=?new?extendCla
8、ss();var?baseinstance?=?new?baseClass();baseinstance.showMsg.call(instance);//顯示baseClass::showMsg?這里的baseinstance.showMsg.call(ins