JS 繼承總結

2022-08-09 10:51:13 字數 2034 閱讀 9696

es裡面沒有真正的繼承，但是能通過某些手段達到繼承效果，從而讓乙個類擁有另外乙個類的方法  類 =>建構函式

繼承描述某語言環境---魔獸世界 哈！其實我沒玩過  魔獸世界裡面 有humen類  humen類裡面有gnome(侏儒) , gnome有方法say(我的名字) 

有共有屬性ggroup=gnome ,humen 有共有屬性hgroup=humen , 有自己名字 hname 共有方法write();

總共共3種繼承方式 一種類繼承 一種是原型繼承 還有一種組合繼承  至於其他的繼承方式,本質上沒啥區別

function  humen(name)


}humen.prototype.hgroup="humen";


new humen('張三');


//傳統的是在gnome裡面建立乙個temp屬性 指向humen建構函式,從而去用humen裡面this指向ganme 然後去初始化gnome裡面的屬性和方法(略)


/**下面是類繼承 


*/function


gnome(name);


humen.call(


this


,name);


}gnome.prototype.ggroup="gnome";


var gnome=new gnome("李四");


console.log(gnome.name);  


//"李四"


console.log(gnome.hgroup);//


//無法繼承原型上面的屬性和方法


/*************************下面是原型繼承 **********************


*/function


gnome(name)


}gnome.prototype.ggroup="gnome";


gnome.prototype=new humen(); //


這裡把一些公共的引數傳進去。。。


var gnome=new gnome("李四");


gnome.say();


//李四


console.log(gnome.hgroup);  //


humen 由此得出這種繼承方式能夠繼承原型鏈上面的屬性和方法 但是個體的方法(this.name)需要重新寫一遍


/*************************都用的不爽 前面2種一種不能繼承原型 一種建構函式裡面的屬性需要重新定義 混合繼承**********************


*/function


gnome(name);


humen.call(


this


,name);


}gnome.prototype=new humen(); //


new humen裡面name屬性是undefined  被類繼承的name覆蓋


gnome.prototype.ggroup="gnome";


var gnome1=new gnome("李四");


gnome1.say();


//李四


gnome.prototype.constructor=gnome; //


由於用原型繼承 建構函式方向指向humen


console.log(gnome1.hgroup);//


"humen"


console.log(gnome1.ggroup);  //


"gnome"
總結:每使用new 關鍵字new乙個物件都是在建立乙個空物件，改變this指標指向空物件,然後初始化其中屬性和方法,還有_proto_指向原型物件,所以對於一些公用的屬性和方法定義在原型物件之中,避免浪費記憶體,私有的(與引數相關)則放在建構函式中。類繼承和原型繼承都有各自的弊端,組合繼承則互補,實現完美繼承，注意constructor的指向

另外附上某處偷來的，自己覺得比較好的js世界裡面的原型煉圖：

JS 繼承方法總結

function person var p1 newperson var p2 newperson console.log p1.say p2.say false核心 將父類的例項作為子類的原型 function cat cat.prototype new animal cat.prototype....

JS中繼承總結

一 原型繼承 父類 function persion name,age 父類的原型物件屬性 persion.prototype.id 6609 子類 function boy 繼承實現 子類的原型物件屬性 new 父類 父類的例項物件 boy.prototype new persion zl 27 ...

Js各種繼承方法總結

原型鏈方式 function classa classa.prototype.color red classa.prototype.saycolor function function classb classb.prototype new classa var b new classb conso...