不是原型繼承那么簡(jiǎn)單??!prototype的深度探索
更新時(shí)間:2007年04月27日 00:00:00 作者:
1 什么是prototype
JavaScript中對(duì)象的prototype屬性,可以返回對(duì)象類型原型的引用。這是一個(gè)相當(dāng)拗口的解釋,要理解它,先要正確理解對(duì)象類型(Type)以及原型(prototype)的概念。
前面我們說,對(duì)象的類(Class)和對(duì)象實(shí)例(Instance)之間是一種“創(chuàng)建”關(guān)系,因此我們把“類”看作是對(duì)象特征的模型化,而對(duì)象看作是類特征的具體化,或者說,類(Class)是對(duì)象的一個(gè)類型(Type)。例如,在前面的例子中,p1和p2的類型都是Point,在JavaScript中,通過instanceof運(yùn)算符可以驗(yàn)證這一點(diǎn):
p1 instanceof Point
p2 instanceof Point
但是,Point不是p1和p2的唯一類型,因?yàn)閜1和p2都是對(duì)象,所以O(shè)bejct也是它們的類型,因?yàn)镺bject是比Point更加泛化的類,所以我們說,Obejct和Point之間有一種衍生關(guān)系,在后面我們會(huì)知道,這種關(guān)系被叫做“繼承”,它也是對(duì)象之間泛化關(guān)系的一個(gè)特例,是面向?qū)ο笾胁豢扇鄙俚囊环N基本關(guān)系。
在面向?qū)ο箢I(lǐng)域里,實(shí)例與類型不是唯一的一對(duì)可描述的抽象關(guān)系,在JavaScript中,另外一種重要的抽象關(guān)系是類型(Type)與原型(prototype)。這種關(guān)系是一種更高層次的抽象關(guān)系,它恰好和類型與實(shí)例的抽象關(guān)系構(gòu)成了一個(gè)三層的鏈,下圖描述了這種關(guān)系:
//TODO:
在現(xiàn)實(shí)生活中,我們常常說,某個(gè)東西是以另一個(gè)東西為原型創(chuàng)作的。這兩個(gè)東西可以是同一個(gè)類型,也可以是不同類型。習(xí)語“依葫蘆畫瓢”,這里的葫蘆就是原型,而瓢就是類型,用JavaScript的prototype來表示就是“瓢.prototype =某個(gè)葫蘆”或者“瓢.prototype= new 葫蘆()”。
要深入理解原型,可以研究關(guān)于它的一種設(shè)計(jì)模式——prototype pattern,這種模式的核心是用原型實(shí)例指定創(chuàng)建對(duì)象的種類,并且通過拷貝這些原型創(chuàng)建新的對(duì)象。JavaScript的prototype就類似于這種方式。
關(guān)于prototype pattern的詳細(xì)內(nèi)容可以參考《設(shè)計(jì)模式》(《Design Patterns》)它不是本文討論的范圍。
注意,同類型與實(shí)例的關(guān)系不同的是,原型與類型的關(guān)系要求一個(gè)類型在一個(gè)時(shí)刻只能有一個(gè)原型(而一個(gè)實(shí)例在一個(gè)時(shí)刻顯然可以有多個(gè)類型)。對(duì)于JavaScript來說,這個(gè)限制有兩層含義,第一是每個(gè)具體的JavaScript類型有且僅有一個(gè)原型(prototype),在默認(rèn)的情況下,這個(gè)原型是一個(gè)Object對(duì)象(注意不是Object類型?。?。第二是,這個(gè)對(duì)象所屬的類型,必須是滿足原型關(guān)系的類型鏈。例如p1所屬的類型是Point和Object,而一個(gè)Object對(duì)象是Point的原型。假如有一個(gè)對(duì)象,它所屬的類型分別為ClassA、ClassB、ClassC和Object,那么必須滿足這四個(gè)類構(gòu)成某種完整的原型鏈,例如:
//TODO:
下面這個(gè)圖描述了JavaScript中對(duì)象、類型和原型三者的關(guān)系:
//TODO:
有意思的是,JavaScript并沒有規(guī)定一個(gè)類型的原型的類型(這又是一段非常拗口的話),因此它可以是任何類型,通常是某種對(duì)象,這樣,對(duì)象-類型-原形(對(duì)象)就可能構(gòu)成一個(gè)環(huán)狀結(jié)構(gòu),或者其它有意思的拓?fù)浣Y(jié)構(gòu),這些結(jié)構(gòu)為JavaScript帶來了五花八門的用法,其中的一些用法不但巧妙而且充滿美感。下面的一節(jié)主要介紹prototype的用法。
2 prototype使用技巧
在了解prototype的使用技巧之前,首要先弄明白prototype的特性。首先,JavaScript為每一個(gè)類型(Type)都提供了一個(gè)prototype屬性,將這個(gè)屬性指向一個(gè)對(duì)象,這個(gè)對(duì)象就成為了這個(gè)類型的“原型”,這意味著由這個(gè)類型所創(chuàng)建的所有對(duì)象都具有這個(gè)原型的特性。另外,JavaScript的對(duì)象是動(dòng)態(tài)的,原型也不例外,給prototype增加或者減少屬性,將改變這個(gè)類型的原型,這種改變將直接作用到由這個(gè)原型創(chuàng)建的所有對(duì)象上,例如:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
如果給某個(gè)對(duì)象的類型的原型添加了某個(gè)名為a的屬性,而這個(gè)對(duì)象本身又有一個(gè)名為a的同名屬性,則在訪問這個(gè)對(duì)象的屬性a時(shí),對(duì)象本身的屬性“覆蓋”了原型屬性,但是原型屬性并沒有消失,當(dāng)你用delete運(yùn)算符將對(duì)象本身的屬性a刪除時(shí),對(duì)象的原型屬性就恢復(fù)了可見性。利用這個(gè)特性,可以為對(duì)象的屬性設(shè)定默認(rèn)值,例如:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
上面的例子通過prototype為Point對(duì)象設(shè)定了默認(rèn)值(0,0),因此p1的值為(0,0),p2的值為(1,2),通過delete p2.x, delete p2.y; 可以將p2的值恢復(fù)為(0,0)。下面是一個(gè)更有意思的例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
利用prototype還可以為對(duì)象的屬性設(shè)置一個(gè)只讀的getter,從而避免它被改寫。下面是一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
將this.getFirstPoint()改寫為下面這個(gè)樣子:
this.getFirstPoint = function()
{
function GETTER(){};
GETTER.prototype = m_firstPoint;
return new GETTER();
}
則可以避免這個(gè)問題,保證了m_firstPoint屬性的只讀性。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
實(shí)際上,將一個(gè)對(duì)象設(shè)置為一個(gè)類型的原型,相當(dāng)于通過實(shí)例化這個(gè)類型,為對(duì)象建立只讀副本,在任何時(shí)候?qū)Ω北具M(jìn)行改變,都不會(huì)影響到原始對(duì)象,而對(duì)原始對(duì)象進(jìn)行改變,則會(huì)影響到副本,除非被改變的屬性已經(jīng)被副本自己的同名屬性覆蓋。用delete操作將對(duì)象自己的同名屬性刪除,則可以恢復(fù)原型屬性的可見性。下面再舉一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
注意,以上的例子說明了用prototype可以快速創(chuàng)建對(duì)象的多個(gè)副本,一般情況下,利用prototype來大量的創(chuàng)建復(fù)雜對(duì)象,要比用其他任何方法來copy對(duì)象快得多。注意到,用一個(gè)對(duì)象為原型,來創(chuàng)建大量的新對(duì)象,這正是prototype pattern的本質(zhì)。
下面是一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
除了上面所說的這些使用技巧之外,prototype因?yàn)樗?dú)特的特性,還有其它一些用途,被用作最廣泛和最廣為人知的可能是用它來模擬繼承,關(guān)于這一點(diǎn),留待下一節(jié)中去討論。
3 prototype的實(shí)質(zhì)
上面已經(jīng)說了prototype的作用,現(xiàn)在我們來透過規(guī)律揭示prototype的實(shí)質(zhì)。
我們說,prototype的行為類似于C++中的靜態(tài)域,將一個(gè)屬性添加為prototype的屬性,這個(gè)屬性將被該類型創(chuàng)建的所有實(shí)例所共享,但是這種共享是只讀的。在任何一個(gè)實(shí)例中只能夠用自己的同名屬性覆蓋這個(gè)屬性,而不能夠改變它。換句話說,對(duì)象在讀取某個(gè)屬性時(shí),總是先檢查自身域的屬性表,如果有這個(gè)屬性,則會(huì)返回這個(gè)屬性,否則就去讀取prototype域,返回protoype域上的屬性。另外,JavaScript允許protoype域引用任何類型的對(duì)象,因此,如果對(duì)protoype域的讀取依然沒有找到這個(gè)屬性,則JavaScript將遞歸地查找prototype域所指向?qū)ο蟮膒rototype域,直到這個(gè)對(duì)象的prototype域?yàn)樗旧砘蛘叱霈F(xiàn)循環(huán)為止,我們可以用下面的圖來描述prototype與對(duì)象實(shí)例之間的關(guān)系:
//TODO:
4 prototype的價(jià)值與局限性
從上面的分析我們理解了prototype,通過它能夠以一個(gè)對(duì)象為原型,安全地創(chuàng)建大量的實(shí)例,這就是prototype的真正含義,也是它的價(jià)值所在。后面我們會(huì)看到,利用prototype的這個(gè)特性,可以用來模擬對(duì)象的繼承,但是要知道,prototype用來模擬繼承盡管也是它的一個(gè)重要價(jià)值,但是絕對(duì)不是它的核心,換句話說,JavaScript之所以支持prototype,絕對(duì)不是僅僅用來實(shí)現(xiàn)它的對(duì)象繼承,即使沒有了prototype繼承,JavaScript的prototype機(jī)制依然是非常有用的。
由于prototype僅僅是以對(duì)象為原型給類型構(gòu)建副本,因此它也具有很大的局限性。首先,它在類型的prototype域上并不是表現(xiàn)為一種值拷貝,而是一種引用拷貝,這帶來了“副作用”。改變某個(gè)原型上引用類型的屬性的屬性值(又是一個(gè)相當(dāng)拗口的解釋:P),將會(huì)徹底影響到這個(gè)類型創(chuàng)建的每一個(gè)實(shí)例。有的時(shí)候這正是我們需要的(比如某一類所有對(duì)象的改變默認(rèn)值),但有的時(shí)候這也是我們所不希望的(比如在類繼承的時(shí)候),下面給出了一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
JavaScript中對(duì)象的prototype屬性,可以返回對(duì)象類型原型的引用。這是一個(gè)相當(dāng)拗口的解釋,要理解它,先要正確理解對(duì)象類型(Type)以及原型(prototype)的概念。
前面我們說,對(duì)象的類(Class)和對(duì)象實(shí)例(Instance)之間是一種“創(chuàng)建”關(guān)系,因此我們把“類”看作是對(duì)象特征的模型化,而對(duì)象看作是類特征的具體化,或者說,類(Class)是對(duì)象的一個(gè)類型(Type)。例如,在前面的例子中,p1和p2的類型都是Point,在JavaScript中,通過instanceof運(yùn)算符可以驗(yàn)證這一點(diǎn):
p1 instanceof Point
p2 instanceof Point
但是,Point不是p1和p2的唯一類型,因?yàn)閜1和p2都是對(duì)象,所以O(shè)bejct也是它們的類型,因?yàn)镺bject是比Point更加泛化的類,所以我們說,Obejct和Point之間有一種衍生關(guān)系,在后面我們會(huì)知道,這種關(guān)系被叫做“繼承”,它也是對(duì)象之間泛化關(guān)系的一個(gè)特例,是面向?qū)ο笾胁豢扇鄙俚囊环N基本關(guān)系。
在面向?qū)ο箢I(lǐng)域里,實(shí)例與類型不是唯一的一對(duì)可描述的抽象關(guān)系,在JavaScript中,另外一種重要的抽象關(guān)系是類型(Type)與原型(prototype)。這種關(guān)系是一種更高層次的抽象關(guān)系,它恰好和類型與實(shí)例的抽象關(guān)系構(gòu)成了一個(gè)三層的鏈,下圖描述了這種關(guān)系:
//TODO:
在現(xiàn)實(shí)生活中,我們常常說,某個(gè)東西是以另一個(gè)東西為原型創(chuàng)作的。這兩個(gè)東西可以是同一個(gè)類型,也可以是不同類型。習(xí)語“依葫蘆畫瓢”,這里的葫蘆就是原型,而瓢就是類型,用JavaScript的prototype來表示就是“瓢.prototype =某個(gè)葫蘆”或者“瓢.prototype= new 葫蘆()”。
要深入理解原型,可以研究關(guān)于它的一種設(shè)計(jì)模式——prototype pattern,這種模式的核心是用原型實(shí)例指定創(chuàng)建對(duì)象的種類,并且通過拷貝這些原型創(chuàng)建新的對(duì)象。JavaScript的prototype就類似于這種方式。
關(guān)于prototype pattern的詳細(xì)內(nèi)容可以參考《設(shè)計(jì)模式》(《Design Patterns》)它不是本文討論的范圍。
注意,同類型與實(shí)例的關(guān)系不同的是,原型與類型的關(guān)系要求一個(gè)類型在一個(gè)時(shí)刻只能有一個(gè)原型(而一個(gè)實(shí)例在一個(gè)時(shí)刻顯然可以有多個(gè)類型)。對(duì)于JavaScript來說,這個(gè)限制有兩層含義,第一是每個(gè)具體的JavaScript類型有且僅有一個(gè)原型(prototype),在默認(rèn)的情況下,這個(gè)原型是一個(gè)Object對(duì)象(注意不是Object類型?。?。第二是,這個(gè)對(duì)象所屬的類型,必須是滿足原型關(guān)系的類型鏈。例如p1所屬的類型是Point和Object,而一個(gè)Object對(duì)象是Point的原型。假如有一個(gè)對(duì)象,它所屬的類型分別為ClassA、ClassB、ClassC和Object,那么必須滿足這四個(gè)類構(gòu)成某種完整的原型鏈,例如:
//TODO:
下面這個(gè)圖描述了JavaScript中對(duì)象、類型和原型三者的關(guān)系:
//TODO:
有意思的是,JavaScript并沒有規(guī)定一個(gè)類型的原型的類型(這又是一段非常拗口的話),因此它可以是任何類型,通常是某種對(duì)象,這樣,對(duì)象-類型-原形(對(duì)象)就可能構(gòu)成一個(gè)環(huán)狀結(jié)構(gòu),或者其它有意思的拓?fù)浣Y(jié)構(gòu),這些結(jié)構(gòu)為JavaScript帶來了五花八門的用法,其中的一些用法不但巧妙而且充滿美感。下面的一節(jié)主要介紹prototype的用法。
2 prototype使用技巧
在了解prototype的使用技巧之前,首要先弄明白prototype的特性。首先,JavaScript為每一個(gè)類型(Type)都提供了一個(gè)prototype屬性,將這個(gè)屬性指向一個(gè)對(duì)象,這個(gè)對(duì)象就成為了這個(gè)類型的“原型”,這意味著由這個(gè)類型所創(chuàng)建的所有對(duì)象都具有這個(gè)原型的特性。另外,JavaScript的對(duì)象是動(dòng)態(tài)的,原型也不例外,給prototype增加或者減少屬性,將改變這個(gè)類型的原型,這種改變將直接作用到由這個(gè)原型創(chuàng)建的所有對(duì)象上,例如:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
如果給某個(gè)對(duì)象的類型的原型添加了某個(gè)名為a的屬性,而這個(gè)對(duì)象本身又有一個(gè)名為a的同名屬性,則在訪問這個(gè)對(duì)象的屬性a時(shí),對(duì)象本身的屬性“覆蓋”了原型屬性,但是原型屬性并沒有消失,當(dāng)你用delete運(yùn)算符將對(duì)象本身的屬性a刪除時(shí),對(duì)象的原型屬性就恢復(fù)了可見性。利用這個(gè)特性,可以為對(duì)象的屬性設(shè)定默認(rèn)值,例如:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
上面的例子通過prototype為Point對(duì)象設(shè)定了默認(rèn)值(0,0),因此p1的值為(0,0),p2的值為(1,2),通過delete p2.x, delete p2.y; 可以將p2的值恢復(fù)為(0,0)。下面是一個(gè)更有意思的例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
利用prototype還可以為對(duì)象的屬性設(shè)置一個(gè)只讀的getter,從而避免它被改寫。下面是一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
將this.getFirstPoint()改寫為下面這個(gè)樣子:
this.getFirstPoint = function()
{
function GETTER(){};
GETTER.prototype = m_firstPoint;
return new GETTER();
}
則可以避免這個(gè)問題,保證了m_firstPoint屬性的只讀性。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
實(shí)際上,將一個(gè)對(duì)象設(shè)置為一個(gè)類型的原型,相當(dāng)于通過實(shí)例化這個(gè)類型,為對(duì)象建立只讀副本,在任何時(shí)候?qū)Ω北具M(jìn)行改變,都不會(huì)影響到原始對(duì)象,而對(duì)原始對(duì)象進(jìn)行改變,則會(huì)影響到副本,除非被改變的屬性已經(jīng)被副本自己的同名屬性覆蓋。用delete操作將對(duì)象自己的同名屬性刪除,則可以恢復(fù)原型屬性的可見性。下面再舉一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
注意,以上的例子說明了用prototype可以快速創(chuàng)建對(duì)象的多個(gè)副本,一般情況下,利用prototype來大量的創(chuàng)建復(fù)雜對(duì)象,要比用其他任何方法來copy對(duì)象快得多。注意到,用一個(gè)對(duì)象為原型,來創(chuàng)建大量的新對(duì)象,這正是prototype pattern的本質(zhì)。
下面是一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
除了上面所說的這些使用技巧之外,prototype因?yàn)樗?dú)特的特性,還有其它一些用途,被用作最廣泛和最廣為人知的可能是用它來模擬繼承,關(guān)于這一點(diǎn),留待下一節(jié)中去討論。
3 prototype的實(shí)質(zhì)
上面已經(jīng)說了prototype的作用,現(xiàn)在我們來透過規(guī)律揭示prototype的實(shí)質(zhì)。
我們說,prototype的行為類似于C++中的靜態(tài)域,將一個(gè)屬性添加為prototype的屬性,這個(gè)屬性將被該類型創(chuàng)建的所有實(shí)例所共享,但是這種共享是只讀的。在任何一個(gè)實(shí)例中只能夠用自己的同名屬性覆蓋這個(gè)屬性,而不能夠改變它。換句話說,對(duì)象在讀取某個(gè)屬性時(shí),總是先檢查自身域的屬性表,如果有這個(gè)屬性,則會(huì)返回這個(gè)屬性,否則就去讀取prototype域,返回protoype域上的屬性。另外,JavaScript允許protoype域引用任何類型的對(duì)象,因此,如果對(duì)protoype域的讀取依然沒有找到這個(gè)屬性,則JavaScript將遞歸地查找prototype域所指向?qū)ο蟮膒rototype域,直到這個(gè)對(duì)象的prototype域?yàn)樗旧砘蛘叱霈F(xiàn)循環(huán)為止,我們可以用下面的圖來描述prototype與對(duì)象實(shí)例之間的關(guān)系:
//TODO:
4 prototype的價(jià)值與局限性
從上面的分析我們理解了prototype,通過它能夠以一個(gè)對(duì)象為原型,安全地創(chuàng)建大量的實(shí)例,這就是prototype的真正含義,也是它的價(jià)值所在。后面我們會(huì)看到,利用prototype的這個(gè)特性,可以用來模擬對(duì)象的繼承,但是要知道,prototype用來模擬繼承盡管也是它的一個(gè)重要價(jià)值,但是絕對(duì)不是它的核心,換句話說,JavaScript之所以支持prototype,絕對(duì)不是僅僅用來實(shí)現(xiàn)它的對(duì)象繼承,即使沒有了prototype繼承,JavaScript的prototype機(jī)制依然是非常有用的。
由于prototype僅僅是以對(duì)象為原型給類型構(gòu)建副本,因此它也具有很大的局限性。首先,它在類型的prototype域上并不是表現(xiàn)為一種值拷貝,而是一種引用拷貝,這帶來了“副作用”。改變某個(gè)原型上引用類型的屬性的屬性值(又是一個(gè)相當(dāng)拗口的解釋:P),將會(huì)徹底影響到這個(gè)類型創(chuàng)建的每一個(gè)實(shí)例。有的時(shí)候這正是我們需要的(比如某一類所有對(duì)象的改變默認(rèn)值),但有的時(shí)候這也是我們所不希望的(比如在類繼承的時(shí)候),下面給出了一個(gè)例子:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- JavaScript 原型繼承
- javascript 原型繼承介紹
- JavaScript 原型繼承之構(gòu)造函數(shù)繼承
- 淺析Javascript原型繼承 推薦
- 關(guān)于JavaScript中原型繼承中的一點(diǎn)思考
- jQuery中創(chuàng)建實(shí)例與原型繼承揭秘
- JavaScript原型繼承之基礎(chǔ)機(jī)制分析
- 理解Javascript_05_原型繼承原理
- javascript 用原型繼承來實(shí)現(xiàn)對(duì)象系統(tǒng)
- javascript 面向?qū)ο笕吕砭氈屠^承
- javascript prototype的深度探索不是原型繼承那么簡(jiǎn)單
- 淺談javascript的原型繼承
相關(guān)文章
使用javascript實(shí)現(xiàn)雪花飄落的效果
本文主要介紹了使用javascript實(shí)現(xiàn)雪花飄落的特效,雖然網(wǎng)上有很多,不過都是比較陳舊了,兼容性不是太好,于是動(dòng)手寫一個(gè),把思路和實(shí)現(xiàn)代碼都分享給大家。2015-01-01
Javascript中各種trim的實(shí)現(xiàn)詳細(xì)解析
這篇文章主要是對(duì)Javascript中各種trim的實(shí)現(xiàn)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
這篇文章主要介紹了JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法,分別用js與jQuery兩種方式加以實(shí)現(xiàn),是非常實(shí)用的特效技巧,需要的朋友可以參考下2014-11-11
HTML使用js給input標(biāo)簽增加disabled屬性的方法
最近項(xiàng)目上提出一個(gè)經(jīng)常遇到的需求,點(diǎn)擊新增時(shí)input可輸入,點(diǎn)擊編輯時(shí)input置灰,下面這篇文章主要給大家介紹了關(guān)于HTML使用js給input標(biāo)簽增加disabled屬性的相關(guān)資料,需要的朋友可以參考下2024-06-06

