JavaScript中的prototype

標籤：

關於prototype：

理解prototype不應把它和繼承混淆。A的prototype為B的一個執行個體，可以理解A將B中的方法和屬性全部複製了一遍。A能使用B的方法和屬性。這裡強調的是複製而不是繼承。可以出現這種情況：A的prototype是B的執行個體，同時B的prototype也是A的執行個體。

現在有一個類A，我想要建立一個類B，我希望這個B類能夠繼承A類的方法和屬性，並且能進行擴充（即添加額外的方法和屬性）。那麼我們稱B的原型為A。即為：B.prototype = A

javascript的方法可以分為三類：    

//1.類方法

function object(name)
{
      this.name = "object類";
      //對象方法： object對象有一個Introduce方法
      this.Introduce=function(){
          alert("My name is "+this.name);
      }
}
 

//2.對象方法       
//類方法：People類具有的Run方法
object.Run=function(){
       alert("I can run");
}
  

//3.原型方法    
//原型方法People的prototype(原型)有一個IntroduceChinese方法
object.prototype.IntroduceChinese=function(){
        alert("我的名字是"+this.name);
}
       
//測試

var p1=new object("Windking");
p1.Introduce();               //    p1的對象方法，每個對象都能調用
object.Run();                  //    object的類方法
p1.IntroduceChinese();     //    p1的原型(父級函數)中，有這個方法

關於call()與appl()：

obj1.func.call(obj)等同於：意思是將obj看成obj1,調用func方法

var func = new function(){
     console.log("調用了func函數")
     this.a = "func";  //每個func函數都有一個屬性a，等於func
}
   
var myfunc=function(x){
      //var a="myfunc";
      alert(this.a);
             alert(x);

}

// 對象func調用myfunc方法,並傳入參數["xxx","yyy","zzz","www"]
// apply中的實參其實都被放入了一個數組中

myfunc.call (func,["xxx","yyy","zzz","www"]);     
// xxx,yyy,zzz,www    call只傳入一個參數,不打數組符號,結果就為xxx
myfunc.apply(func,["xxx","yyy","zzz","www"]);    
// xxx    apply後面必須跟數組,

一個栗子：

function baseClass()
{
     this.showMsg = function()
     {
         alert("baseClass::showMsg");  
     }
}

function extendClass()
{
}

extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 顯示baseClass::showMsg

 

我們首先定義了baseClass類，然後我們要定義extentClass，但是我們打算以baseClass的一個執行個體為原型，來複製的extendClass也同時包含showMsg這個對象方法。

extendClass.prototype = new baseClass()就可以閱讀為：extendClass是以baseClass的一個執行個體為原型複製建立的。

 

那麼就會有一個問題，如果extendClass中本身包含有一個與baseClass的方法同名的方法會怎麼樣？

第二個栗子：

function baseClass()
{
    this.showMsg = function()
    {
        alert("baseClass::showMsg");  
    }
}

function extendClass()
{
    this.showMsg =function ()
    {
        alert("extendClass::showMsg");
    }
}

extendClass.prototype = new baseClass();
var instance = new extendClass();

instance.showMsg();//顯示extendClass::showMsg

實驗證明：函數運行時會先去本體的函數中去找，如果找到則運行，找不到則去prototype中尋找函數。或者可以理解為prototype不會複製同名函數。

如果我想使用extendClass的一個執行個體instance調用baseClass的對象方法showMsg怎麼辦？答案是可以使用call

第三個栗子：

extendClass.prototype = new baseClass();
var instance = new extendClass();

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//顯示baseClass::showMsg

這裡的baseinstance.showMsg.call(instance);閱讀為“將instance當做baseinstance來調用，調用它的對象方法showMsg”。好了，這裡可能有人會問，為什麼不用baseClass.showMsg.call(instance);這就是對象方法和類方法的區別，我們想調用的是baseClass的對象方法

最後的栗子：

最後，下面這個代碼如果理解清晰，那麼這篇文章說的就已經理解了：

<script type="text/javascript">

function baseClass()
{
    this.showMsg = function()
    {
        alert("baseClass::showMsg");  
    }
  
    this.baseShowMsg = function()
    {
        alert("baseClass::baseShowMsg");
    }
}
baseClass.showMsg = function()
{
    alert("baseClass::showMsg static");
}

function extendClass()
{
    this.showMsg =function ()
    {
        alert("extendClass::showMsg");
    }
}
extendClass.showMsg = function()
{
    alert("extendClass::showMsg static")
}

extendClass.prototype = new baseClass();
var instance = new extendClass();

instance.showMsg(); //顯示extendClass::showMsg
instance.baseShowMsg(); //顯示baseClass::baseShowMsg
instance.showMsg(); //顯示extendClass::showMsg

baseClass.showMsg.call(instance);//顯示baseClass::showMsg static

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//顯示baseClass::showMsg

JavaScript中的prototype