本文例項講述了JavaScript使用prototype屬性實現繼承操作。分享給大家供大家參考，具體如下：

JS並沒有顯式的繼承語法,在JS中所有的物件都是Object的子類實現,因而物件之間是平等關係.

儘管如此我們可以通過特殊的方法達到繼承的效果.

當然JS也不能直接定義類,我們通過定義函式可以得到一個同名的類,同時這個函式就是這個類的構造器,

在定義函式時以this修飾的變數就是定義的 類的例項中的屬性,當這個屬性時函式時,就可以認為這個屬性變成了一個例項方法

//定義一個Person類
function Person(name,age)
{
  this.name=name;
  this.age=age;
  //定義一個info函式
  this.info=function()
  {
    document.writeln("年齡"+this.age+"姓名"+this.name);
  }
}
//建立Person類的例項物件
var p1= new Person('xiaoming',20);
//呼叫p1的info方法
p1.info();
var p2= new Person('wang',22);
p2.info();

這種在類內(函式內)定義函式的方式是有弊端的:

• 效能低下,這種方式定義函式在每次建立物件時都會建立一個新的info函式,有多個物件就會有多個info函式,實際上我們只需要一個info函式,這樣就會造成系統記憶體洩漏,引起效能的下降
• 使info函式中的區域性變數產生閉包,閉包會擴大區域性變數的作用域,使區域性變數存活到函式外

為了避免這兩種情況,通常不建議在類定義時為類定義方法,而是採用prototype屬性:

JS中所有類(函式)都有一個prototype屬性,為該屬性增加屬性方法可以視為對類的拓展,

也就是增加了prototype屬性的類繼承了原有的類,這也就是JS所提供的偽繼承機制

//定義一個Person類
function Person(name,20);
//呼叫p1的info方法
p1.info();
 
//為Person類增加walk方法
Person.prototype.walk=function()
{
  document.writeln(this.name+'正在走<br/>');
}
var p2=new Person('xiaohong',20);
//p2可以呼叫Person中的方法
p2.info();
//也可以呼叫prototype屬性增加的方法
p2.walk();
//JS允許為類動態增加方法和屬性,這裡p1也可以呼叫walk
p1.walk();

上例為prototype屬性增加了方法可以認為是為Person類動態地增加了方法,

這種方式增加的方法會讓所有例項共享一個walk方法,可以注意到是Person.prototype類的屬性,並非例項

walk方法不在Person函式內,因此不會產生閉包,

這種為類動態地增加屬性和方法可以被當作一種偽繼承,

但這種偽繼承並非產生 了新的子類而是修改了原有的類

彆著急,prototype屬性還有另一種方式實現繼承:

prototype屬性代表該類原型物件,即預設是一個Object物件,將類prototype設為父類例項可以實現繼承

function Person(name,age)
{
  this.name=name;
  this.age=age;
}
Person.prototype.say=function()
{
  console.log(this.name+'說話了');
}
var per = new Person('小明',20);
per.say();
//再定義一個student類,欲意繼承Person
function Student (grade)
{
  this.grade=grade;
}
//將student的prototype設為Person物件
Student.prototype =new Person('小紅',22);
//為Student新增方法
Student.prototype.intro= function()
{
  console.log(this.name+'是'+this.grade+'年級學生');
}
var stu=new Student(3);
stu.name="小剛";
console.log(stu instanceof Person&& stu instanceof Student);//true
stu.say();//小剛說話了
stu.intro();//小剛是3年級學生

上例定義了Person類,增加了say()方法

又定義了Student類,並將Student類的prototype屬性設為Person物件,表明Student原型是Person物件,

也就是Student繼承了Person,會得到其方法和屬性

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。