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