首頁 > web前端 > js教程 > js原型鏈繼承的幾個細節問題 部落格分類: JavaScript

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

巴扎黑
發布: 2016-11-25 10:02:54
原創
1313 人瀏覽過

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 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板