自從有了ES6的繼承后，ES5的繼承也退出了舞臺(tái)，在實(shí)際開(kāi)發(fā)也不會(huì)用得著，但在面試或許用的著；

先看看ES6的繼承

class Father{ constructor(a){console.log(a); } play(){console.log('aaa'); } static run(){console.log('static'); } } class Son extends Father{ constructor(){super(); } } var s=new Son(); s.play(); Father.run() Son.run();

在ES6里只需要使用extends和super關(guān)鍵字即可繼承父類(lèi)的方法和屬性(包括靜態(tài))

在ES5里沒(méi)有這些關(guān)鍵字

ES5的繼承

ES5的五種種繼承方式：

對(duì)象冒充繼承

function Father(_r){ this.r=_r; console.log('aa'); console.log(this.r); } Father.a=3; Father.run=function(){ console.log(Box.a); }function Son(){ Father.call(this,3)；//改變this的指向，執(zhí)行父類(lèi)構(gòu)造函數(shù)并傳參到父類(lèi) } var b=new Son();//'aa',3 b.run();//TypeError

通過(guò)call或apply改變this指向,并執(zhí)行了父類(lèi)的構(gòu)造函數(shù)

缺點(diǎn)：只能繼承超類(lèi)的構(gòu)造函數(shù),無(wú)法繼承原型鏈上的方法

原型鏈繼承

function Father(){ console.log('aa'); }Father.prototype.b=10; Father.prototype.play=function(){ console.log(this.b); } Son.prototype=new Father(); function Son(){ } var b=new Son(); b.play();//10

將父類(lèi)的實(shí)例化對(duì)象賦值給子類(lèi)的原型上實(shí)現(xiàn)的繼承

缺點(diǎn)：覆蓋子類(lèi)原有的屬性和方法，只能執(zhí)行父類(lèi)的屬性和方法，無(wú)法執(zhí)行父類(lèi)的構(gòu)造函數(shù)

組合繼承

前面的兩種繼承(冒充，原型鏈)各有特點(diǎn)，把這兩種繼承組合起來(lái)稱(chēng)為組合繼承

function Father(_r){ this.r=_r; console.log('aa'); }function Son(_r){ Father.call(this,_r);//冒充，改變父類(lèi)的this指向子類(lèi) }Son.prototype=new Father(3);//原型鏈繼承 var c=new Son(10);

使用原型鏈繼承了父類(lèi)的屬性和方法，使用對(duì)象冒充繼承了父類(lèi)的構(gòu)造函數(shù)

看起來(lái)很不錯(cuò)的樣子，但這并不是完美的繼承方式；

缺點(diǎn)：會(huì)覆蓋子類(lèi)原有的屬性和方法，因?yàn)樵玩溊^承會(huì)將父類(lèi)實(shí)例化，提前執(zhí)行了一次父類(lèi)構(gòu)造函數(shù)；當(dāng)子類(lèi)實(shí)例化對(duì)象后，實(shí)際上是執(zhí)行了兩次父類(lèi)的構(gòu)造函數(shù)。

使用場(chǎng)景：子類(lèi)原本沒(méi)有屬性和方法，父類(lèi)構(gòu)造函數(shù)沒(méi)有內(nèi)容。

原型式繼承

為了解決執(zhí)行兩次父類(lèi)構(gòu)造函數(shù)使用了一個(gè)中介，在繼承時(shí)就不會(huì)執(zhí)行父類(lèi)的構(gòu)造函數(shù)

function Father(_a){ this.a=_a } Father.prototype.play=function(){ console.log('aaa'); } function Agent(){ } Agent.prototype=Father.prototype; function Son(){ } Son.prototype=new Agent(); var o=new Son(); o.play();//aaa

使用了Agent的類(lèi)作為中介，將父類(lèi)的原型復(fù)制后，再進(jìn)行實(shí)例化繼承不會(huì)執(zhí)行父類(lèi)的構(gòu)造函數(shù)；

缺點(diǎn)：雖然解決了構(gòu)造函數(shù)執(zhí)行兩次的問(wèn)題，但是使用該方法繼承后，構(gòu)造函數(shù)一次也不會(huì)執(zhí)行。

寄生式繼承(完美繼承)

封裝了一個(gè)extend方法，該方法傳入兩個(gè)參數(shù)，分別是父類(lèi)和子類(lèi)

function extend(subClass, supClass) { function Agent() {} Agent.prototype = supClass.prototype; var o = subClass.prototype; subClass.prototype = new Agent(); if (Object.assign) { Object.assign(subClass.prototype, o); } else { if (Object.getOwnPropertyNames) { var names = Object.getOwnPropertyNames(o); for (var i = 0; i < names.length; i++) {var desc = Object.getOwnPropertyDescriptor(names[i]);Object.defineProperty(subClass.prototype, names[i], desc); } } else { for (var prop in o) {subClass.prototype[prop] = o[prop]; } } } subClass.prototype.constructor = subClass; //防止子類(lèi)的構(gòu)造函數(shù)被覆蓋 if (supClass.prototype.constructor === Object) { supClass.prototype.constructor = supClass; //防止父類(lèi)類(lèi)的構(gòu)造函數(shù)被覆蓋 } // 存儲(chǔ)父類(lèi)，方便繼承構(gòu)造函數(shù)調(diào)用 subClass.prototype.superClass = supClass; } //調(diào)用 function Father(_r) { this.r = _r; console.log('Father'); } Father.prototype.play = function () { console.log('play game'); }; function Ball(_r) { this.superClass.call(this, _r); } var s = new Son(10);//Father s.play();//play game

extend方法，使用了Object.assgin、Object.getOwnPropertyNames、Object.getOwnPropertyDescriptor、Object.defineProperty都存在兼容問(wèn)題，所以進(jìn)行了判斷。

該方法繼承集合了前四種的優(yōu)點(diǎn)，實(shí)現(xiàn)了ES5的完美繼承；

結(jié)語(yǔ)：

ES5對(duì)比ES6的繼承，麻煩太多太多，以后的實(shí)際工作也不會(huì)使用；

但是在面試的時(shí)候，面試官可能會(huì)問(wèn)，多學(xué)一點(diǎn)總沒(méi)錯(cuò)。

以上就是詳解JavaScript之ES5的繼承的詳細(xì)內(nèi)容，更多關(guān)于JavaScript ES5的繼承的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！