js原型鏈繼承的幾個細節問題 部落格分類： JavaScript

1.怎麼實現只繼承prototype

先看下面的程式碼：

Js代碼  

function A(){  

 

A.prototype.eat=function(){ console.log("I can eat") }  

function B(){}  

B.prototype=new B(){}  

B.prototype=new A;/B了A. cc=new B;  

cc.eat();//I can eat  

cc.name;//"李可可"  

我們可以看到的是，A繼承了B的所有屬性，那麼如果我們只想讓B繼承A.prototype屬性，不要A上面的name和age等一大堆沒用的東西，那該怎麼辦？

有人可能就說了，直接像下面這樣不就完了嗎：

Js代碼  

B.prototype=A.prototype;  

var cc=newmB; can eat  

cc.name;//undefined  

喲，好像很完美？繼續看

Js程式碼  

B.prototype.fuck=function(){console.log("I fuck you!")}  

var cc=new B,.")}  

var cc=new B,. );//I fuck you!  

dd.fuck();//I fuck you!  

//哦買噶的，怎麼兩個人都學會罵人了  

//哦買噶的，怎麼兩個人都學會罵人了  

//當發生子B的prototype時也會影響到A的prototype(當然反過來也是)，原因也很簡單，因為我們讓A.prototype指向了B的prototype  

 解決辦法：

建立一個函數，裡面創建一個空的對象，並且讓該空物件的prototype指向要繼承的父對象，最後傳回該物件的實例，程式碼如下

Js程式碼  

Object.createPro=function(pro){  

 function F(pro){  

 =pro;  

  return new F;  

}  

 我們可以測試來一下：

Js代碼 

 this.age=21;

}  

A.prototype.eat=function(){ console.log("I can eat") }  

function B(){} /B只繼承了A的prototype屬性  

  

var cc=new B;  

cc.eat();//I can eat ){console.log("I fuck you!")}//我們現在改B的prototype  

var dd=new A;  

dd.fuck();//封包錯誤TypeError 

dd.fuck();//報錯類型Error 的改變並沒有影響到A的任何屬性  

 但是這樣做也太麻煩了吧，ES5幫我們解決了這個問題，我們可以直接使用Object自帶的一個靜態方法create()：

Js代碼  

function A(){  

 this.name="李可可";  

 this.age=21;  

}  

function B(){}  

B.prototype=Object.create(A.prototype);//只會繼承A的prototype  

 在繼承的同時也可以給B添加一些特有的屬性如下：

 在繼承的同時也可以給B添加一些特有的屬性如下：

 在繼承的同時也可以給B添加一些特有的屬性如下：

 在繼承的同時也可以為B添加一些特有的屬性如下：

 在繼承的同時也可以給B添加一些特有的屬性如下Js代碼  

function A(){  

 this.name="李可可";  

 this.age=21;  

} eat") }  

function B(){}  

B.prototype=Object.create(A.prototype,{   

 p:{ 值,且是不可寫的，但可枚舉  

});  

var pp=new B;  

pp.p;//42  //I can eat  

pp.p=666;  

pp.p;//42 (不可寫)  

 其中第二個參數特殊的權限標籤

 當然，想透過此方法繼承A的所有屬性也是可以的像下面

Js程式碼  

B.prototype=Object.create(new A);  

需要注意的是Object.create(new A);  

需要注意的是Object.create 的兼容性，只有相容ES5的瀏覽器才是可以的，或者我們可以自己模擬一個，就像上面的Object.createPro方法

 

2.關於constructor指向問題以及constructor的可枚舉性

在第一個問題中，我們使用了Object.create方法實作了不同類別之間的繼承，然而這樣做的話卻存在一個問題，如下：

Js程式碼  

function A(){  

function A(){  

 this. name="李可可";  

 this.age=21;  

}  

A.prototype.eat=function(){ console.log("Ican eat")) 

B.prototype=Object.create(A.prototype);  

  

var cc=new B;  

cc.constructor;//A　　（這裡變成的值了

 那麼如何解決上面的問題呢？

Js代碼  

//我們最容易想到的是手動設定constructor屬性，像下面這樣  

B.prototype.constructor=B;  

 B.prototype.propertyIsEnumerable("constructor");//true (我們設定的constructor屬性是可枚舉的)  

當然我們並不希望是這樣，那怎麼做呢？

Js程式碼  

//使用Object.defineProperty或Object.defineProperties方法設定constructor的enumerable為false  

Object.defineProperty(B.prototype,"constructor" :false/ /不可枚舉  

});  

cc.constructor;//B  

B.prototype.propertyIsEnumerable("constructor");//false  

的問題prototype的時候，就像下面這樣

Js程式碼  

function C(){}  

C.prototype={}  

var C)  

C.prototype.constructor=C;  

C.prototype.propertyIsEnumerable("constructor");//true　（同樣是可枚舉的） 當然，還有一個方法就是你不要去重寫它，只要往上面加屬性就行，像下面這樣：

Js程式碼  

function D(){}  

D.prototype.x=1; var gg=new D;  

gg.constructor; //D  

D.prototype.propertyIsEnumerable("constructor");//false