javascript prototype 原型鏈
2024-05-06 14:15:56
供稿：網友
JavaScript中的prototype概念恰如其分地反映了這個詞的內含，我們不能將其理解為C++的prototype那種預先聲明的概念。
JavaScript 的所有function類型的對象都有一個prototype屬性。這個prototype屬性本身又是一個object類型的對象，因此我們也可以給這個prototype對象添加任意的屬性和方法。既然prototype是對象的“原型”，那么由該函數構造出來的對象應該都會具有這個“原型”的特性。事實上，在構造函數的prototype上定義的所有屬性和方法，都是可以通過其構造的對象直接訪問和調用的。也可以這么說，prototype提供了一群同類對象共享屬性和方法的機制。
我們先來看看下面的代碼：
function Person(name)
{
this.name = name; //設置對象屬性，每個對象各自一份屬性數據
};
Person.prototype.SayHello = function() //給Person函數的prototype添加SayHello方法。
{
alert("Hello, I'm " + this.name);
}
var BillGates = new Person("Bill Gates"); //創建BillGates對象
var SteveJobs = new Person("Steve Jobs"); //創建SteveJobs對象
BillGates.SayHello(); //通過BillGates對象直接調用到SayHello方法
SteveJobs.SayHello(); //通過SteveJobs對象直接調用到SayHello方法
alert(BillGates.SayHello == SteveJobs.SayHello); //因為兩個對象是共享prototype的SayHello，所以顯示：true
程序運行的結果表明，構造函數的prototype上定義的方法確實可以通過對象直接調用到，而且代碼是共享的。顯然，把方法設置到prototype的寫法顯得優雅多了，盡管調用形式沒有變，但邏輯上卻體現了方法與類的關系，相對前面的寫法，更容易理解和組織代碼。
那么，對于多層次類型的構造函數情況又如何呢？
我們再來看下面的代碼：
1 function Person(name) //基類構造函數
2 {
3 this.name = name;
4 };
5
6 Person.prototype.SayHello = function() //給基類構造函數的prototype添加方法
7 {
8 alert("Hello, I'm " + this.name);
9 };
10
11 function Employee(name, salary) //子類構造函數
12 {
13 Person.call(this, name); //調用基類構造函數
14 this.salary = salary;
15 };
16
17 Employee.prototype = new Person(); //建一個基類的對象作為子類原型的原型，這里很有意思
18
19 Employee.prototype.ShowMeTheMoney = function() //給子類添構造函數的prototype添加方法
20 {
21 alert(this.name + " $" + this.salary);
22 };
23
24 var BillGates = new Person("Bill Gates"); //創建基類Person的BillGates對象
25 var SteveJobs = new Employee("Steve Jobs", 1234); //創建子類Employee的SteveJobs對象
26
27 BillGates.SayHello(); //通過對象直接調用到prototype的方法
28 SteveJobs.SayHello(); //通過子類對象直接調用基類prototype的方法，關注！
29 SteveJobs.ShowMeTheMoney(); //通過子類對象直接調用子類prototype的方法
