prototype是javascript中筆記難理解的一部分內(nèi)容，下面通過(guò)幾個(gè)關(guān)鍵知識(shí)點(diǎn)給大家講解js中的prototype。具體內(nèi)容請(qǐng)看下文詳情。

1 原型法設(shè)計(jì)模式

在.Net中可以使用clone()來(lái)實(shí)現(xiàn)原型法

原型法的主要思想是，現(xiàn)在有1個(gè)類(lèi)A,我想要?jiǎng)?chuàng)建一個(gè)類(lèi)B,這個(gè)類(lèi)是以A為原型的,并且能進(jìn)行擴(kuò)展。我們稱B的原型為A。

2 javascript的方法可以分為三類(lèi)：

a 類(lèi)方法
b 對(duì)象方法
c 原型方法

例子：

function People(name)
{
 this.name=name;
 //對(duì)象方法
 this.Introduce=function(){
 alert("My name is "+this.name);
 }
}
//類(lèi)方法
People.Run=function(){
 alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
 alert("我的名字是"+this.name);
}
//測(cè)試
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese(); 

3 obj1.func.call(obj)方法

意思是將obj看成obj1,調(diào)用func方法

好了，下面一個(gè)一個(gè)問(wèn)題解決：

prototype是什么含義？

javascript中的每個(gè)對(duì)象都有prototype屬性，Javascript中對(duì)象的prototype屬性的解釋是：返回對(duì)象類(lèi)型原型的引用。

A.prototype = new B();

理解prototype不應(yīng)把它和繼承混淆。A的prototype為B的一個(gè)實(shí)例，可以理解A將B中的方法和屬性全部克隆了一遍。A能使用B的方法和屬性。這里強(qiáng)調(diào)的是克隆而不是繼承。可以出現(xiàn)這種情況：A的prototype是B的實(shí)例，同時(shí)B的prototype也是A的實(shí)例。

先看一個(gè)實(shí)驗(yàn)的例子：

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 顯示baseClass::showMsg

我們首先定義了baseClass類(lèi)，然后我們要定義extentClass，但是我們打算以baseClass的一個(gè)實(shí)例為原型，來(lái)克隆的extendClass也同時(shí)包含showMsg這個(gè)對(duì)象方法。

extendClass.prototype = new baseClass()就可以閱讀為：extendClass是以baseClass的一個(gè)實(shí)例為原型克隆創(chuàng)建的。

那么就會(huì)有一個(gè)問(wèn)題，如果extendClass中本身包含有一個(gè)與baseClass的方法同名的方法會(huì)怎么樣？

下面是擴(kuò)展實(shí)驗(yàn)2：

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

實(shí)驗(yàn)證明：函數(shù)運(yùn)行時(shí)會(huì)先去本體的函數(shù)中去找，如果找到則運(yùn)行，找不到則去prototype中尋找函數(shù)?；蛘呖梢岳斫鉃閜rototype不會(huì)克隆同名函數(shù)。

那么又會(huì)有一個(gè)新的問(wèn)題：

如果我想使用extendClass的一個(gè)實(shí)例instance調(diào)用baseClass的對(duì)象方法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當(dāng)做baseinstance來(lái)調(diào)用，調(diào)用它的對(duì)象方法showMsg”

好了，這里可能有人會(huì)問(wèn)，為什么不用baseClass.showMsg.call(instance);

這就是對(duì)象方法和類(lèi)方法的區(qū)別，我們想調(diào)用的是baseClass的對(duì)象方法

最后，下面這個(gè)代碼如果理解清晰，那么這篇文章說(shuō)的就已經(jīng)理解了：

<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
</script>

ps：js的Prototype屬性 解釋及常用方法

函數(shù)：原型

每一個(gè)構(gòu)造函數(shù)都有一個(gè)屬性叫做原型(prototype,下面都不再翻譯，使用其原文)。這個(gè)屬性非常有用：為一個(gè)特定類(lèi)聲明通用的變量或者函數(shù)。

prototype的定義

你不需要顯式地聲明一個(gè)prototype屬性，因?yàn)樵诿恳粋€(gè)構(gòu)造函數(shù)中都有它的存在。你可以看看下面的例子：

Example PT1
CODE:

function Test()
{
}
alert(Test.prototype); // 輸出 "Object"

給prototype添加屬性

就如你在上面所看到的，prototype是一個(gè)對(duì)象，因此，你能夠給它添加屬性。你添加給prototype的屬性將會(huì)成為使用這個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象的通用屬性。
例如，我下面有一個(gè)數(shù)據(jù)類(lèi)型Fish，我想讓所有的魚(yú)都有這些屬性：livesIn="water"和price=20；為了實(shí)現(xiàn)這個(gè)，我可以給構(gòu)造函數(shù)Fish的prototype添加那些屬性。

Example PT2

CODE:

function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;

接下來(lái)讓我們作幾條魚(yú)：

CODE:

var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");

再來(lái)看看魚(yú)都有哪些屬性：

CODE:

for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i); // 我只是取得指向這條魚(yú)的指針
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}

輸出應(yīng)該是：

CODE:

"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white water, 20"

你看到所有的魚(yú)都有屬性livesIn和price,我們甚至都沒(méi)有為每一條不同的魚(yú)特別聲明這些屬性。這時(shí)因?yàn)楫?dāng)一個(gè)對(duì)象被創(chuàng)建時(shí)，這個(gè)構(gòu)造函數(shù) 將會(huì)把它的屬性prototype賦給新對(duì)象的內(nèi)部屬性__proto__。這個(gè)__proto__被這個(gè)對(duì)象用來(lái)查找它的屬性。

你也可以通過(guò)prototype來(lái)給所有對(duì)象添加共用的函數(shù)。這有一個(gè)好處：你不需要每次在構(gòu)造一個(gè)對(duì)象的時(shí)候創(chuàng)建并初始化這個(gè)函數(shù)。為了解釋這一點(diǎn)，讓我們重新來(lái)看Example DT9并使用prototype來(lái)重寫(xiě)它：

用prototype給對(duì)象添加函數(shù)

Example PT3

CODE:

function Employee(name, salary)
{
this.name=name;    
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

 我們可以象通常那樣創(chuàng)建對(duì)象：

CODE:

var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);

并驗(yàn)證它：

CODE:

alert(boss1.getSalary()); // 輸出 200000
alert(boss2.getSalary()); // 輸出 100000
alert(boss3.getSalary()); // 輸出 150000

這里有一個(gè)圖示來(lái)說(shuō)明prototype是如何工作的。這個(gè)對(duì)象的每一個(gè)實(shí)例(boss1, boss2, boss3)都有一個(gè)內(nèi)部屬性叫做__proto__，這個(gè)屬性指向了它的構(gòu)造器(Employee)的屬性prototype。當(dāng)你執(zhí)行 getSalary或者addSalary的時(shí)候，這個(gè)對(duì)象會(huì)在它的__proto__找到并執(zhí)行這個(gè)代碼。注意這點(diǎn)：這里并沒(méi)有代碼的復(fù)制(和 Example DT8的圖表作一下對(duì)比)。

最新評(píng)論