前端開發必須知道的JS之原型和繼承
2024-09-06 12:45:26
供稿：網友
一. 原型與構造函數
Js所有的函數都有一個prototype屬性，這個屬性引用了一個對象，即原型對象，也簡稱原型。這個函數包括構造函數和普通函數，我們講的更多是構造函數的原型，但是也不能否定普通函數也有原型。譬如普通函數：
代碼如下:
function F(){
alert(F.prototype instanceof Object) //true;
}
構造函數，也即構造對象。首先了解下通過構造函數實例化對象的過程。
代碼如下:
function A(x){
this.x=x;
}
var obj=new A(1);
實例化obj對象有三步：
1. 創建obj對象：obj=new Object();
2. 將obj的內部__proto__指向構造他的函數A的prototype，同時，obj.constructor===A.prototype.constructor(這個是永遠成立的，即使A.prototype不再指向原來的A原型，也就是說：類的實例對象的constructor屬性永遠指向"構造函數"的prototype.constructor)，從而使得obj.constructor.prototype指向A.prototype（obj.constructor.prototype===A.prototype，當A.prototype改變時則不成立，下文有遇到）。obj.constructor.prototype與的內部_proto_是兩碼事，實例化對象時用的是_proto_，obj是沒有prototype屬性的，但是有內部的__proto__，通過__proto__來取得原型鏈上的原型屬性和原型方法，FireFox公開了__proto__，可以在FireFox中alert（obj.__proto__）；
3. 將obj作為this去調用構造函數A，從而設置成員（即對象屬性和對象方法）并初始化。
當這3步完成，這個obj對象就與構造函數A再無聯系，這個時候即使構造函數A再加任何成員，都不再影響已經實例化的obj對象了。此時，obj對象具有了x屬性，同時具有了構造函數A的原型對象的所有成員，當然，此時該原型對象是沒有成員的。
原型對象初始是空的，也就是沒有一個成員（即原型屬性和原型方法）。可以通過如下方法驗證原型對象具有多少成員。
代碼如下:
var num=0;
for(o in A.prototype) {
alert(o);//alert出原型屬性名字
num++;
}
alert("member: " + num);//alert出原型所有成員個數。
但是，一旦定義了原型屬性或原型方法，則所有通過該構造函數實例化出來的所有對象，都繼承了這些原型屬性和原型方法，這是通過內部的_proto_鏈來實現的。
譬如
A.prototype.say=function(){alert("Hi")};
那所有的A的對象都具有了say方法，這個原型對象的say方法是唯一的副本給大家共享的，而不是每一個對象都有關于say方法的一個副本。
二. 原型與繼承
首先，看個簡單的繼承實現。
代碼如下:
function A(x){
this.x=x;
}
function B(x,y){
this.tmpObj=A;
this.tmpObj(x);
delete this.tmpObj;
