關(guān)于JS中的constructor與prototype

最初對js中object.constructor 的認(rèn)識:

1


在學(xué)習(xí)JS的面向?qū)ο筮^程中,一直對constructor與prototype感到很迷惑,看了一些博客與書籍,覺得自己弄明白了,現(xiàn)在記錄如下:


我們都知道,在JS中有一個(gè)function的東西。一般人們叫它函數(shù)。比如下面的代碼

functionPerson(name)

{

alert(name);

}

Person('js');//js

上面的代碼中,Person的表現(xiàn)的確跟一般的函數(shù)沒有什么區(qū)別,接著看下面的代碼



functionPerson(name)

{

this.name=name;

this.showMe=function()

{

alert(this.name);

}

};

varone=newPerson('JavaScript');

one.showMe();//JavaScript

很多人見到了久違的new操作符,于是就叫Person為“類”,可是又沒有關(guān)鍵字class的出現(xiàn),覺得叫“類”有點(diǎn)勉強(qiáng)。于是退而求其次叫Person為類的構(gòu)造函數(shù)。這些概念好像都沒有錯(cuò),之所以出現(xiàn)這樣的情況,可能是因?yàn)榇蠹叶紝W(xué)習(xí)了傳統(tǒng)的面向?qū)ο笳Z言(c++,c#,java等),還有一種思維定勢吧。為了讓javascript也面向?qū)ο?,要在javascript中找到與傳統(tǒng)面向?qū)ο笳Z言的影子??墒前凑誮avascript的說法,function定義的這個(gè)Person就是一個(gè)Object(對象),而且還是一個(gè)很特殊的對象,這個(gè)使用function定義的對象與使用new操作符生成的對象之間有一個(gè)重要的區(qū)別。這個(gè)區(qū)別就是function定義的對象有一個(gè)prototype屬性,使用new生成的對象就沒有這個(gè)prototype屬性。

prototype屬性又指向了一個(gè)prototype對象,注意prototype屬性prototype對象是兩個(gè)不同的東西,要注意區(qū)別。在prototype對象中又有一個(gè)constructor屬性,這個(gè)constructor屬性同樣指向一個(gè)constructor對象,而這個(gè)constructor對象恰恰就是這個(gè)function函數(shù)本身。

有點(diǎn)頭暈,看下圖吧:

不相信可以看下面的代碼:

functionPerson(name)

{

this.name=name;

this.showMe=function()

{

alert(this.name);

}

};

varone=newPerson('js');

alert(one.prototype)//undefined

alert(typeofPerson.prototype);//object

alert(Person.prototype.constructor);//function?Person(name)?{...};

上面的代碼證明了one這個(gè)對象沒有prototype屬性。

我們接著看代碼:


functionPerson(name)

{

this.name=name;

this.showMe=function()

{

alert(this.name);

}

};

Person.prototype.from=function()

{

alert('I?come?from?prototype.');

}

varone=newPerson('js');

one.showMe();//js,這個(gè)結(jié)果沒有什么好奇怪的

one.from();//I?come?from?prototype.,這個(gè)結(jié)果有一點(diǎn)奇怪吧。

要解釋這個(gè)結(jié)果就要仔細(xì)研究一下new這個(gè)操作符了.var one=new Person('js');這個(gè)語句執(zhí)行的過程可以分成下面的語句:

varone={};

Person.call(one,'js');

按照《悟透javascript》書中說的,new形式創(chuàng)建對象的過程實(shí)際上可以分為三步:

第一步是建立一個(gè)新對象(叫A吧);

第二步將該對象(A)內(nèi)置的原型對象設(shè)置為構(gòu)造函數(shù)(就是Person)prototype 屬性引用的那個(gè)原型對象;

第三步就是將該對象(A)作為this 參數(shù)調(diào)用構(gòu)造函數(shù)(就是Person),完成成員設(shè)置等初始化工作。

其中第二步中出現(xiàn)了一個(gè)新名詞就是內(nèi)置的原型對象,注意這個(gè)新名詞跟prototype對象不是一回事,為了區(qū)別我叫它inobj,inobj就指向了函數(shù)Person的prototype對象。在person的prototype對象中出現(xiàn)的任何屬性或者函數(shù)都可以在one對象中直接使用,這個(gè)就是javascript中的原型繼承了。

又頭暈了,上圖吧!

這樣one對象通過內(nèi)置的原型對象inobj就可以直接訪問Person的prototype對象中的任何屬性與方法了。這也就解釋了上面的代碼中為什么one可以訪問form函數(shù)了。因?yàn)閜rototype對象中有一個(gè)constructor屬性,那么one也可以直接訪問constructor屬性。


functionPerson(name)

{

this.name=name;

this.showMe=function()

{

alert(this.name);

}

};

Person.prototype.from=function()

{

alert('I?come?from?prototype.');

}

varone=newPerson('js');

one.showMe();//js,這個(gè)結(jié)果沒有什么好奇怪的

one.from();//I?come?from?prototype.,這個(gè)結(jié)果有一點(diǎn)奇怪吧

alert(one.constructor);//function?Person(name)?{...}

alert(Person.prototype.constructor);//function?Person(name)?{...}

接著看繼承是如何實(shí)現(xiàn)的。


functionPerson(name)

{

this.name=name;

this.showMe=function()

{

alert(this.name);

}

};

Person.prototype.from=function()

{

alert('I?come?from?prototype.');

}

functionSubPerson()

{

}

SubPerson.prototype=newPerson();

varsubOne=newSubPerson();

subOne.from();//I?come?from?prototype.

alert(subOne.constructor);//function?Person(name)?{...};

alert(SubPerson.prototype.constructor);//function?Person(name)?{...};

繼承的實(shí)現(xiàn)很簡單,只需要把子類的prototype設(shè)置為父類的一個(gè)(實(shí)例化)對象即可。注意這里說的可是對象哦!

那么通過prototype屬性實(shí)現(xiàn)繼承的原理是什么呢?還是先看圖形說明,然后編寫代碼進(jìn)行驗(yàn)證。

注意:紅色的方框就是把子類與父類鏈接起來的地方。這個(gè)就應(yīng)該是傳說中的prototype鏈了吧。下面有代碼進(jìn)行驗(yàn)證。

functionPerson(name)

{

this.name=name;

this.showMe=function()

{

alert(this.name);

}

};

Person.prototype.from=function()

{

alert('I?come?from?prototype.');

}

varfather=newPerson('js');//為了下面演示使用showMe方法,采用了js參數(shù),實(shí)際多采用無參數(shù)

alert(father.constructor);//查看構(gòu)造函數(shù),結(jié)果是:function?Person(name)?{...};

functionSubPer()

{

}

SubPer.prototype=father;//注意這里

SubPer.prototype.constructor=SubPer;

varson=newSubPer();

son.showMe();//js

son.from();//I?come?from?prototype.

alert(father.constructor);//function?SubPer(){...}

alert(son.constructor);//function?SubPer(){...}

alert(SubPer.prototype.constructor);//function?SubPer(){...}

根據(jù)上圖的prototype鏈,還有代碼的結(jié)果,我想應(yīng)該明白為什么使用prototype能夠?qū)崿F(xiàn)

JS中的繼承了吧。


摘自:http://blog.csdn.net/niuyongjie/archive/2009/11/15/4810835.aspx

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容