下面小編就為大家?guī)硪黄狫avascript中的幾種繼承方式對比分析。小編覺得挺不錯的，現(xiàn)在分享給大家，希望能給大家一個參考。

開篇

從'嚴格'意義上說，javascript并不是一門真正的面向?qū)ο笳Z言。這種說法原因一般都是覺得javascript作為一門弱類型語言與類似java或c#之類的強型語言的繼承方式有很大的區(qū)別，因而默認它就是非主流的面向?qū)ο蠓绞?，甚至竟有很多書將其描述?非完全面向?qū)ο?語言。其實個人覺得，什么方式并不重要，重要的是是否具有面向?qū)ο蟮乃枷?，說javascript不是面向?qū)ο笳Z言的，往往都可能沒有深入研究過javascript的繼承方式，故特撰此文以供交流。

為何需要利用javascript實現(xiàn)繼承

早期pc機器的性能確實不敢恭維，所有的壓力全在服務器端，客戶端瀏覽器純屬擺設(shè)。再加上那時流行的table布局以及電話線的上網(wǎng)方式導致瀏覽一個網(wǎng)頁十分的卡；而今互聯(lián)網(wǎng)時代飛速發(fā)展，個人電腦硬件得到了極大提升，客戶端瀏覽器的性能也十分的酸爽，web開發(fā)的模式也在悄悄改變：服務端不再像以前那樣“辛苦”，取而代之的是盡可能的讓瀏覽器承擔更多的任務，如此一來，壓力分攤到每個客戶端上，企業(yè)不但節(jié)省成本，隨之也讓web前端開發(fā)變的更加有趣－－越來越多的前端框架層出不窮，甚至出現(xiàn)了許多前端的MVC框架。在這種背景下，javascript的角色已經(jīng)絕對不是只做一些簡單的驗證，發(fā)送一些請求或者操作一些DOM，更多的需要擔任類似前端路由和業(yè)務層的角色，并且javascript需要做大量的邏輯性任務，這里面就包括前臺數(shù)據(jù)的抽離（即model），而只有運用面向?qū)ο蟮乃季S才能很好的對抽離數(shù)據(jù)進行處理，因此繼承就在這里顯得舉足輕重。

從一個簡單的需求開始

現(xiàn)從前臺抽離一個model名為Person，其有基本屬性name和age，默認每個人都會說話，因此將說話的功能say放在了原型對象上，以供每個實例享用。現(xiàn)在對于Man來說，它需要繼承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的所有屬性方法(實例上的和原型上的)，直接將父類的實例new Person('pursue')賦給了子類的原型，其實子類的實例man1,man2本身是一個完全空的對象，所有的屬性和方法都得去原型鏈上去找，因而找到的屬性方法都是同一個。 

所以直接利用原型鏈繼承是不現(xiàn)實的。

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

這里子類的在構(gòu)造函數(shù)里利用了apply去調(diào)用父類的構(gòu)造函數(shù)，從而達到繼承父類屬性的效果，比直接利用原型鏈要好的多，至少每個實例都有自己那一份資源，但是這種辦法只能繼承父類的實例屬性，因而找不到say方法，為了繼承父類所有的屬性和方法，則就要修改原型鏈，從而引入了組合繼承方式。

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的實例屬性其實是覆蓋了原型屬性，但是并沒要覆蓋掉原型上的say方法（因為它們沒有），所以這里man1.say === man2.say依然返回true，因而需要十分小心沒有覆蓋掉的原型屬性，因為它是所有實例共有的。

4.寄生組合繼承

說實話我真不知道下面的這種形式叫這名字，但是它確實是最流行，最經(jīng)典的javascript的繼承方式。其實，只需要明白原型對象的結(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);

其實寄生組合繼承和上面的組合繼承區(qū)別僅在于構(gòu)造子類原型對象的方式上（a.和b.），這里用到了Object.creat(obj)方法，該方法會對傳入的obj對象進行淺拷貝，類似于：

function create(obj){

  function T(){};

  T.prototype = obj;

  return new T();

}

因此，a.會將子類的原型對象與父類的原型對象進行很好的連接，而并不像一般的組合繼承那樣直接對子類的原型進行復制（如Man.prototype = new Person();）,這樣只是很暴力的在對屬性進行覆蓋。而寄生組合繼承方式則對實例屬性和原型屬性分別進行了繼承，在實現(xiàn)上更加合理。

注意:代碼b.并不會改變instanceof的結(jié)果，但是對于需要用到construcor的場景，這么做更加嚴謹。

以上這篇Javascript中的幾種繼承方式對比分析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考