第淺析JavaScript的繼承和原型鏈淺析JavaScript的繼承和原型鏈

JavaScript的繼承和原型鏈?zhǔn)俏以趯W(xué)習(xí)前端過程中遇到的較為少有的難以理解的部分，這里便將我所有知道和了解到的東西記錄了下來，希望能夠給還在這里面苦苦掙扎的兄弟萌一點(diǎn)點(diǎn)小的幫助，也歡迎各位大佬批評(píng)指正。

二、構(gòu)造函數(shù)

2.1構(gòu)造函數(shù)的實(shí)例成員和靜態(tài)成員

構(gòu)造函數(shù)由實(shí)例成員和靜態(tài)成員二者組成，其中實(shí)例成員是在函數(shù)內(nèi)部通過this關(guān)鍵字添加的成員；只能通過實(shí)例化對(duì)象以后通過實(shí)例化對(duì)象進(jìn)行訪問；而靜態(tài)成員是函數(shù)本身上添加的成員，只能通過構(gòu)造函數(shù)來訪問。

//創(chuàng)造一個(gè)構(gòu)造函數(shù)letFather=function(name,age){

//實(shí)例成員

=name;

this.age=age;

this.method=我是一個(gè)實(shí)例成員}

//靜態(tài)成員Father.like=mother

//檢驗(yàn)實(shí)例對(duì)象是否能夠被構(gòu)造函數(shù)直接訪問console.log(Father.method);

//undefinedconsole.log(Father.like);

//mother

//實(shí)例化一個(gè)對(duì)象letfather=newFather(小王,27);

//檢驗(yàn)靜態(tài)對(duì)象是否能夠被實(shí)例化對(duì)象訪問console.log();

//小王console.log(father.age);

//27console.log(father.like);

//undefined

2.2實(shí)例化對(duì)象的過程

通過new關(guān)鍵字可以通過構(gòu)造函數(shù)實(shí)現(xiàn)一個(gè)實(shí)例化對(duì)象，那么在具體實(shí)例化的過程中發(fā)生了什么呢？大致可以劃分為以下幾個(gè)步驟：

(1)創(chuàng)建一個(gè)空對(duì)象son{}

(2)為son準(zhǔn)備原型鏈連接son.__proto__=Ftotype

(3)重新綁定this，使構(gòu)造函數(shù)的this指向新對(duì)象Father.call(this)

(4)為新對(duì)象屬性賦值

(5)返回thisreturnthis，此時(shí)的新對(duì)象就擁有了構(gòu)造函數(shù)的方法和屬性了

一個(gè)小問題：所有實(shí)例化對(duì)象的方法都是共享的嗎？

構(gòu)造函數(shù)的方法分為兩種，第一種為在函數(shù)內(nèi)部直接定義的方法，第二種為通過原型添加的方法；

//函數(shù)內(nèi)部直接定義的方法letFather=function(){

this.read=function(){

console.log(我是內(nèi)部定義的read方法！

}}//通過原型鏈添加的方法Ftotype.look=function(){

console.log(我是通過原型鏈定義的look方法！}

//實(shí)例化對(duì)象進(jìn)行檢驗(yàn)letfather1=newFather();letfather2=newFather();

father1.read();

//我是內(nèi)部定義的read方法！father2.read();

//我是內(nèi)部定義的read方法！console.log(father1.read===father2.read);

//falsefather1.look();

//我是通過原型鏈定義的look方法！father2.look();

//我是通過原型鏈定義的look方法！console.log(father1.look===father2.look);

/true

可以發(fā)現(xiàn)，函數(shù)內(nèi)部直接定義的方法在每實(shí)例化一個(gè)新的對(duì)象以后，都會(huì)給這個(gè)方法分配一個(gè)新的內(nèi)存空間，而通過原型添加的方法便會(huì)共享一個(gè)空間。

一個(gè)小問題：所有實(shí)例化對(duì)象的屬性都是共享的嗎？

不存在內(nèi)存空間的問題，判斷時(shí)看其值是否相同；

letFather=function(name){

=name;}letfather1=newFather(小王

letfather2=newFather(小紅

console.log(===);

//falseletfather1=newFather(小王

letfather2=newFather(小王

console.log(===);

//true

因此我們可以總結(jié)一下定義構(gòu)造函數(shù)的基本規(guī)則，即公共屬性定義到構(gòu)造函數(shù)里面，公共方法我們放到原型對(duì)象身上。

3.1什么是原型

Ftotype就是原型，它是一個(gè)對(duì)象，也可以稱為原型對(duì)象。

3.2原型的作用是什么

原型的作用，就是共享方法。

我們通過Ftotype.method可以共享方法，不會(huì)反應(yīng)開辟空間存儲(chǔ)方法。

3.3原型中的this指向哪兒

原型中this的指向是實(shí)例。

四、原型鏈

原型鏈本人感覺是一個(gè)對(duì)于初學(xué)者或者說是部分前端菜雞（例如本人）來說特別難以理解的東西，為了讓下面的部分更容易理解，這里強(qiáng)行先記住以下幾點(diǎn)：

__proto__是每個(gè)對(duì)象都有的屬性，prototype是每個(gè)函數(shù)特有的方法；

每個(gè)對(duì)象的__proto__屬性都會(huì)指向自身構(gòu)造函數(shù)的prototype；

constructor屬性始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)；

Function.__proto__===Ftotype;

Ototype.__proto__===null也就是原型鏈的終點(diǎn);

4.1什么是原型鏈

原型與原型層層相鏈接的過程即為原型鏈。

4.2原型鏈的應(yīng)用

對(duì)象可以使用構(gòu)造函數(shù)prototype原型對(duì)象的屬性和方法，就是因?yàn)閷?duì)象有__proto__原型的存在每個(gè)對(duì)象都有__proto__原型的存在

letFather=function(name){

=name;}letfather=newFather(老王console.log(father.__proto__===Ftotype);

//true

//驗(yàn)證上述說法中的第二條

4.3原型鏈圖

結(jié)合寫在最前面的幾點(diǎn)，理解上圖應(yīng)該問題不大了，圖中圈起來的部分就是駭人聽聞的原型鏈。

4.4原型鏈的查找方式

functionStar(name){

=name;

//(1)首先看obj對(duì)象身上是否有dance方法，如果有，則執(zhí)行對(duì)象身上的方法

this.dance=function(){

console.log(+1

}}//(2)如果沒有dance方法，就去構(gòu)造函數(shù)原型對(duì)象prototype身上去查找dance這個(gè)方法。Stotype.dance=function(){

console.log(+2};

//(3)如果再?zèng)]有dance方法，就去Object原型對(duì)象prototype身上去查找dance這個(gè)方法。Ototype.dance=function(){

console.log(+3};

//(4)如果再?zèng)]有，則會(huì)報(bào)錯(cuò)。letobj=newStar(小紅obj.dance();

(1)首先看obj對(duì)象身上是否有dance方法，如果有，則執(zhí)行對(duì)象身上的方法。

(2)如果沒有dance方法，就去構(gòu)造函數(shù)原型對(duì)象prototype身上去查找dance這個(gè)方法。

(3)如果再?zèng)]有dance方法，就去Object原型對(duì)象prototype身上去查找dance這個(gè)方法。

(4)如果再?zèng)]有，則會(huì)報(bào)錯(cuò)。

一個(gè)小問題：在原型上添加方法需要注意的地方

有兩種添加方法，第一種為上面的寫法，直接通過構(gòu)造函數(shù).prototype.方法名進(jìn)行添加；第二種為重定義構(gòu)造函數(shù)的prototype，但是此種情況會(huì)丟失掉原有的constructor構(gòu)造器，所以一定要再連接回去，例子如下：

functionStar(name){

=name;}Stotype={

dance:function(){

console.log(重定義prototype

}}Stotype.constructor=Star;

另外，類似于Array、String這些內(nèi)置的類是不能這么處理的。

這里就長(zhǎng)話短說，首先我們要明確繼承需要繼承哪些東西，在前文中我們提到了定義構(gòu)造函數(shù)的基本規(guī)則，即**公共屬性定義到構(gòu)造函數(shù)里面，公共方法我們放到原型對(duì)象身上。**我們所需要繼承的東西也不外乎就這二者，公共屬性的繼承可以通過call()或者apply()進(jìn)行this的指向定義，而公共方法可以通過原型對(duì)象的賦值進(jìn)行處理，因此我們很容易想到如下的方法：

//定義一個(gè)父類functionFather(name){

=name;}Ftotype.dance=function(){

console.log(Iamdancing};//定義一個(gè)子類functionSon(name,age){

Father.call(this,name);

this.age=age;}//通過賦值的方法連接Stotype=Ftotype;//為子類添加方法Stotype.sing=function(){

console.log(Iamsinging};

letson=newSon(小紅,100);

//此時(shí)父類也被影響了console.log(Ftotype)

//{dance:,sing:,constructor:}

很顯然，當(dāng)我們只想修改子類里面的方法時(shí)，顯然上述方法不太合適；因此我們可以嘗試new一個(gè)新的父類出來，代碼如下：

functionFather(name){

=name;}Ftotype.dance=function(){

console.log(Iamdancing};functionSon(name,age){

Father.call(this,name);

this.age=age;}Stotype=newFather();Stotype.sing=function(){

console.log(Iamsinging};letson=newSon(小紅,100);console.log(Ftotype)

//{dance:,constructor:}

六、class語法糖

對(duì)于以前了解過面向?qū)ο缶幊痰某绦騿T來講，上述關(guān)于繼承的寫法屬實(shí)讓人有些難以接受，因此在es6里面新增了一個(gè)語法糖來更方便更便捷地書寫繼承，這里就直接上代碼了；

classFather{

constructor(name){

=name;

dance(){

console.log(我是++，我今年+this.age+歲，+我在跳舞

}}classSonextendsFather{

constructor(name,age){

super(name);

this.age=age;

sing(){

con