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

在學(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