前端開發(fā)必須知道的JS之原型和繼承

2024-09-06 12:45:26

字體：大中小

供稿：網(wǎng)友

一. 原型與構(gòu)造函數(shù)

　　Js所有的函數(shù)都有一個prototype屬性，這個屬性引用了一個對象，即原型對象，也簡稱原型。這個函數(shù)包括構(gòu)造函數(shù)和普通函數(shù)，我們講的更多是構(gòu)造函數(shù)的原型，但是也不能否定普通函數(shù)也有原型。譬如普通函數(shù)：
代碼如下:
function F(){
　　alert(F.prototype instanceof Object) //true;
}

　　構(gòu)造函數(shù)，也即構(gòu)造對象。首先了解下通過構(gòu)造函數(shù)實例化對象的過程。
代碼如下:
function A(x){
　　this.x=x;
}
var obj=new A(1);

實例化obj對象有三步：

　　1. 創(chuàng)建obj對象：obj=new Object();

　　2. 將obj的內(nèi)部__proto__指向構(gòu)造他的函數(shù)A的prototype，同時，obj.constructor===A.prototype.constructor(這個是永遠成立的，即使A.prototype不再指向原來的A原型，也就是說：類的實例對象的constructor屬性永遠指向"構(gòu)造函數(shù)"的prototype.constructor)，從而使得obj.constructor.prototype指向A.prototype（obj.constructor.prototype===A.prototype，當A.prototype改變時則不成立，下文有遇到）。obj.constructor.prototype與的內(nèi)部_proto_是兩碼事，實例化對象時用的是_proto_，obj是沒有prototype屬性的，但是有內(nèi)部的__proto__，通過__proto__來取得原型鏈上的原型屬性和原型方法，F(xiàn)ireFox公開了__proto__，可以在FireFox中alert（obj.__proto__）；

　　3. 將obj作為this去調(diào)用構(gòu)造函數(shù)A，從而設(shè)置成員（即對象屬性和對象方法）并初始化。

　　當這3步完成，這個obj對象就與構(gòu)造函數(shù)A再無聯(lián)系，這個時候即使構(gòu)造函數(shù)A再加任何成員，都不再影響已經(jīng)實例化的obj對象了。此時，obj對象具有了x屬性，同時具有了構(gòu)造函數(shù)A的原型對象的所有成員，當然，此時該原型對象是沒有成員的。

　　原型對象初始是空的，也就是沒有一個成員（即原型屬性和原型方法）。可以通過如下方法驗證原型對象具有多少成員。
代碼如下:
var num=0;
for(o in A.prototype) {
　　alert(o);//alert出原型屬性名字
　　num++;
}
alert("member: " + num);//alert出原型所有成員個數(shù)。

　　但是，一旦定義了原型屬性或原型方法，則所有通過該構(gòu)造函數(shù)實例化出來的所有對象，都繼承了這些原型屬性和原型方法，這是通過內(nèi)部的_proto_鏈來實現(xiàn)的。

　　譬如

　　A.prototype.say=function(){alert("Hi")};

　　那所有的A的對象都具有了say方法，這個原型對象的say方法是唯一的副本給大家共享的，而不是每一個對象都有關(guān)于say方法的一個副本。

二. 原型與繼承

　　首先，看個簡單的繼承實現(xiàn)。
代碼如下:
function A(x){
　　this.x=x;
}
function B(x,y){
　　this.tmpObj=A;
　　this.tmpObj(x);
　　delete this.tmpObj;

上一篇：jquery multiSelect 多選下拉框

下一篇：IE8 chrome中table隔行換色解決辦法