JavaScript中的prototype
1、原型法設計模式
原型法主要思想是,現在有1個類A,我想要創建1個類B,這個類是以A為原型的,并且能夠進行擴展。我們稱B的原型為A。
2、JavaScript的方法可以分為三類:
類對象 對象方法 原型方法
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();
P1.Introduce();
3、obj1.func.call(obj) 方法
意思是將obj看成obj1,調用func方法。
4、prototype含義
JavaScript中每個對象都有prototype屬性,JavaScript中對象的prototype屬性解釋是:返回對象類型原型的引用。
A.prototype =new B();
理解prototype不應把它和繼承混淆。A的prototype為B的一個實例,可以理解A將B中的方法和屬性全部克隆一遍。A能使用B的方法和屬性。這里強調的是克隆而不是繼承。可以出這種情況:A的prototype是B的實例,同時B的prototype也是A的實例。
例子
function baseClass(){
this.showMsg =function(){
alert("baseClass : : showMsg");
}
}
function extendClass(){
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();
//顯示baseClass::showMsg
我們首先定義了baseClass類,然后我們要定義extendClass,但我們打算以baseClass的一個實例為原型,來克隆extendClass也同時包含showMsg這個對象方法。
如果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的對象方法