下面小編就為大家?guī)?lái)一篇Javascript中的幾種繼承方式對(duì)比分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，希望能給大家一個(gè)參考。
開(kāi)篇
從'嚴(yán)格'意義上說(shuō)，javascript并不是一門(mén)真正的面向?qū)ο笳Z(yǔ)言。這種說(shuō)法原因一般都是覺(jué)得javascript作為一門(mén)弱類(lèi)型語(yǔ)言與類(lèi)似java或c#之類(lèi)的強(qiáng)型語(yǔ)言的繼承方式有很大的區(qū)別，因而默認(rèn)它就是非主流的面向?qū)ο蠓绞剑踔辆褂泻芏鄷?shū)將其描述為'非完全面向?qū)ο?語(yǔ)言。其實(shí)個(gè)人覺(jué)得，什么方式并不重要，重要的是是否具有面向?qū)ο蟮乃枷耄f(shuō)javascript不是面向?qū)ο笳Z(yǔ)言的，往往都可能沒(méi)有深入研究過(guò)javascript的繼承方式，故特撰此文以供交流。
為何需要利用javascript實(shí)現(xiàn)繼承
早期pc機(jī)器的性能確實(shí)不敢恭維，所有的壓力全在服務(wù)器端，客戶(hù)端瀏覽器純屬擺設(shè)。再加上那時(shí)流行的table布局以及電話線的上網(wǎng)方式導(dǎo)致瀏覽一個(gè)網(wǎng)頁(yè)十分的卡；而今互聯(lián)網(wǎng)時(shí)代飛速發(fā)展，個(gè)人電腦硬件得到了極大提升，客戶(hù)端瀏覽器的性能也十分的酸爽，web開(kāi)發(fā)的模式也在悄悄改變：服務(wù)端不再像以前那樣“辛苦”，取而代之的是盡可能的讓瀏覽器承擔(dān)更多的任務(wù)，如此一來(lái)，壓力分?jǐn)偟矫總€(gè)客戶(hù)端上，企業(yè)不但節(jié)省成本，隨之也讓web前端開(kāi)發(fā)變的更加有趣－－越來(lái)越多的前端框架層出不窮，甚至出現(xiàn)了許多前端的MVC框架。在這種背景下，javascript的角色已經(jīng)絕對(duì)不是只做一些簡(jiǎn)單的驗(yàn)證，發(fā)送一些請(qǐng)求或者操作一些DOM，更多的需要擔(dān)任類(lèi)似前端路由和業(yè)務(wù)層的角色，并且javascript需要做大量的邏輯性任務(wù)，這里面就包括前臺(tái)數(shù)據(jù)的抽離（即model），而只有運(yùn)用面向?qū)ο蟮乃季S才能很好的對(duì)抽離數(shù)據(jù)進(jìn)行處理，因此繼承就在這里顯得舉足輕重。
從一個(gè)簡(jiǎn)單的需求開(kāi)始
現(xiàn)從前臺(tái)抽離一個(gè)model名為Person，其有基本屬性name和age，默認(rèn)每個(gè)人都會(huì)說(shuō)話，因此將說(shuō)話的功能say放在了原型對(duì)象上，以供每個(gè)實(shí)例享用。現(xiàn)在對(duì)于Man來(lái)說(shuō)，它需要繼承Person的基本屬性，并且在此基礎(chǔ)上添加自己特有的屬性。
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man() {
//my own properties
}
下面介紹幾種主流的繼承方式。
1.原型鏈繼承
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true
這種繼承方式很直接，為了獲取Person的所有屬性方法(實(shí)例上的和原型上的)，直接將父類(lèi)的實(shí)例new Person('pursue')賦給了子類(lèi)的原型，其實(shí)子類(lèi)的實(shí)例man1,man2本身是一個(gè)完全空的對(duì)象，所有的屬性和方法都得去原型鏈上去找，因而找到的屬性方法都是同一個(gè)。
所以直接利用原型鏈繼承是不現(xiàn)實(shí)的。
2.利用構(gòu)造函數(shù)繼承
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function
這里子類(lèi)的在構(gòu)造函數(shù)里利用了apply去調(diào)用父類(lèi)的構(gòu)造函數(shù)，從而達(dá)到繼承父類(lèi)屬性的效果，比直接利用原型鏈要好的多，至少每個(gè)實(shí)例都有自己那一份資源，但是這種辦法只能繼承父類(lèi)的實(shí)例屬性，因而找不到say方法，為了繼承父類(lèi)所有的屬性和方法，則就要修改原型鏈，從而引入了組合繼承方式。
3.組合繼承
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe
需要注意的是man1和man2的實(shí)例屬性其實(shí)是覆蓋了原型屬性，但是并沒(méi)要覆蓋掉原型上的say方法（因?yàn)樗鼈儧](méi)有），所以這里man1.say === man2.say依然返回true，因而需要十分小心沒(méi)有覆蓋掉的原型屬性，因?yàn)樗撬袑?shí)例共有的。
4.寄生組合繼承
說(shuō)實(shí)話我真不知道下面的這種形式叫這名字，但是它確實(shí)是最流行，最經(jīng)典的javascript的繼承方式。其實(shí)，只需要明白原型對(duì)象的結(jié)構(gòu)即可：
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);
其實(shí)寄生組合繼承和上面的組合繼承區(qū)別僅在于構(gòu)造子類(lèi)原型對(duì)象的方式上（a.和b.），這里用到了Object.creat(obj)方法，該方法會(huì)對(duì)傳入的obj對(duì)象進(jìn)行淺拷貝，類(lèi)似于：
function create(obj){
function T(){};
T.prototype = obj;
return new T();
}
因此，a.會(huì)將子類(lèi)的原型對(duì)象與父類(lèi)的原型對(duì)象進(jìn)行很好的連接，而并不像一般的組合繼承那樣直接對(duì)子類(lèi)的原型進(jìn)行復(fù)制（如Man.prototype = new Person();）,這樣只是很暴力的在對(duì)屬性進(jìn)行覆蓋。而寄生組合繼承方式則對(duì)實(shí)例屬性和原型屬性分別進(jìn)行了繼承，在實(shí)現(xiàn)上更加合理。
注意:代碼b.并不會(huì)改變instanceof的結(jié)果，但是對(duì)于需要用到construcor的場(chǎng)景，這么做更加嚴(yán)謹(jǐn)。
以上這篇Javascript中的幾種繼承方式對(duì)比分析就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：