談js中的prototype及prototype屬性解釋及常用方法_javascript技巧

prototype是javascript筆記難理解的一部分內容，以下透過幾個關鍵知識點來跟大家講解js中的prototype。具體內容請看下文詳情。

1 原型法設計模式

在.Net中可以使用clone()實現原型法

原型法的主要思想是，現在有1個類A,我想要創建一個類B,這個類是以A為原型的,並且能進行擴展。我們稱B的原型為A。

2 javascript的方法可以分為三類：

a 類別方法
b 物件方法
c 原型方法

範例：

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(); 

3 obj1.func.call(obj)方法

意思是將obj看成obj1,呼叫func方法

好了，下面一個問題解決：

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類，然後我們要定義extentClass，但是我們打算以baseClass的一個實例為原型，來複製的extendClass也同時包含showMsg這個物件方法。

extendClass.prototype = new baseClass()就可以閱讀為：extendClass是以baseClass的一個實例為原型克隆建立的。

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

以下是擴展實驗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

實驗證明：函數運行時會先去本體的函數中去找，如果找到則運行，找不到則去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
</script>

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

函數：原型

每一個建構函式都有一個屬性叫做原型(prototype,下面都不再翻譯，使用其原文)。這個屬性非常有用：為一個特定類別聲明通用的變數或函數。

prototype的定義

你不需要明確地宣告一個prototype屬性，因為在每一個建構函式中都有它的存在。你可以看看下面的範例：

Example PT1
CODE:

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

為prototype新增屬性

就如你在上面所看到的，prototype是一個對象，因此，你能夠為它添加屬性。你加入給prototype的屬性將會成為使用這個建構函式建立的物件的通用屬性。
例如，我下面有一個資料類型Fish，我想要讓所有的魚都有這些屬性：livesIn="water"和price=20；為了實現這個，我可以給構造函數Fish的prototype添加那些屬性。

Example PT2

CODE:

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

接下來讓我們作幾條魚：

CODE:

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

再來看看魚有哪些屬性：

CODE:

for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i); // 我只是取得指向这条鱼的指针
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}

輸出應該是：

CODE:

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

你看到所有的鱼都有属性livesIn和price,我们甚至都没有为每一条不同的鱼特别声明这些属性。这时因为当一个对象被创建时，这个构造函数 将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。

你也可以通过prototype来给所有对象添加共用的函数。这有一个好处：你不需要每次在构造一个对象的时候创建并初始化这个函数。为了解释这一点，让我们重新来看Example DT9并使用prototype来重写它：

用prototype给对象添加函数

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;
}

我们可以象通常那样创建对象：

CODE:

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

并验证它：

CODE:

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

这里有一个图示来说明prototype是如何工作的。这个对象的每一个实例(boss1, boss2, boss3)都有一个内部属性叫做__proto__，这个属性指向了它的构造器(Employee)的属性prototype。当你执行 getSalary或者addSalary的时候，这个对象会在它的__proto__找到并执行这个代码。注意这点：这里并没有代码的复制(和 Example DT8的图表作一下对比)。