這篇文章主要介紹了JavaScript中的繼承方式詳解,本文講解了js繼承的概念、原型式繼承與類式繼承、原型鏈繼承、類式繼承、組合繼承、原型式繼承等內容,需要的朋友可以參考下

js繼承的概念

js里常用的如下兩種繼承方式：

原型鏈繼承（對象間的繼承）

類式繼承（構造函數間的繼承）

由于js不像java那樣是真正面向對象的語言，js是基于對象的，它沒有類的概念。所以，要想實現繼承，可以用js的原型prototype機制或者用apply和call方法去實現

在面向對象的語言中，我們使用類來創建一個自定義對象。然而js中所有事物都是對象，那么用什么辦法來創建自定義對象呢？這就需要用到js的原型：

我們可以簡單的把prototype看做是一個模版，新創建的自定義對象都是這個模版（prototype）的一個拷貝 （實際上不是拷貝而是鏈接，只不過這種鏈接是不可見，新實例化的對象內部有一個看不見的__Proto__指針，指向原型對象）。

js可以通過構造函數和原型的方式模擬實現類的功能。 另外，js類式繼承的實現也是依靠原型鏈來實現的。

原型式繼承與類式繼承

類式繼承是在子類型構造函數的內部調用超類型的構造函數。

嚴格的類式繼承并不是很常見，一般都是組合著用：

代碼如下:

function Super(){

this.colors=["red","blue"];

}

function Sub(){

Super.call(this);

}

原型式繼承是借助已有的對象創建新的對象，將子類的原型指向父類，就相當于加入了父類這條原型鏈

原型鏈繼承

為了讓子類繼承父類的屬性（也包括方法），首先需要定義一個構造函數。然后，將父類的新實例賦值給構造函數的原型。代碼如下：

代碼如下:

<script>

function Parent(){

this.name = 'mike';

}

function Child(){

this.age = 12;

}

Child.prototype = new Parent();//Child繼承Parent，通過原型，形成鏈條

var test = new Child();

alert(test.age);

alert(test.name);//得到被繼承的屬性

//繼續原型鏈繼承

function Brother(){ //brother構造

this.weight = 60;

}

Brother.prototype = new Child();//繼續原型鏈繼承

var brother = new Brother();

alert(brother.name);//繼承了Parent和Child,彈出mike

alert(brother.age);//彈出12

</script>

以上原型鏈繼承還缺少一環，那就是Object，所有的構造函數都繼承自Object。而繼承Object是自動完成的，并不需要我們自己手動繼承，那么他們的從屬關系是怎樣的呢？

確定原型和實例的關系

可以通過兩種方式來確定原型和實例之間的關系。操作符instanceof和isPrototypeof()方法：

代碼如下:

alert(brother instanceof Object)//true

alert(test instanceof Brother);//false,test 是brother的超類

alert(brother instanceof Child);//true

alert(brother instanceof Parent);//true

只要是原型鏈中出現過的原型，都可以說是該原型鏈派生的實例的原型，因此，isPrototypeof()方法也會返回true

在js中，被繼承的函數稱為超類型（父類，基類也行），繼承的函數稱為子類型（子類，派生類）。使用原型繼承主要由兩個問題：

一是字面量重寫原型會中斷關系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數。

偽類解決引用共享和超類型無法傳參的問題，我們可以采用“借用構造函數”技術

借用構造函數（類式繼承）

代碼如下:

<script>

function Parent(age){

this.name = ['mike','jack','smith'];

this.age = age;

}

function Child(age){

Parent.call(this,age);

}

var test = new Child(21);

alert(test.age);//21

alert(test.name);//mike,jack,smith

test.name.push('bill');

alert(test.name);//mike,jack,smith,bill

</script>

借用構造函數雖然解決了剛才兩種問題，但沒有原型，則復用無從談起，所以我們需要原型鏈+借用構造函數的模式，這種模式稱為組合繼承

組合繼承

代碼如下:

<script>

function Parent(age){

this.name = ['mike','jack','smith'];

this.age = age;

}

Parent.prototype.run = function () {

return this.name + ' are both' + this.age;

};

function Child(age){

Parent.call(this,age);//對象冒充，給超類型傳參

}

Child.prototype = new Parent();//原型鏈繼承

var test = new Child(21);//寫new Parent(21)也行

alert(test.run());//mike,jack,smith are both21

</script>

組合式繼承是比較常用的一種繼承方法，其背后的思路是 使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數復用，又保證每個實例都有它自己的屬性。

call()的用法：調用一個對象的一個方法，以另一個對象替換當前對象。

代碼如下:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

原型式繼承

這種繼承借助原型并基于已有的對象創建新對象，同時還不用創建自定義類型的方式稱為原型式繼承

代碼如下:

<script>

function obj(o){

function F(){}

F.prototype = o;

return new F();

}

var box = {

name : 'trigkit4',

arr : ['brother','sister','baba']

};

var b1 = obj(box);

alert(b1.name);//trigkit4

b1.name = 'mike';

alert(b1.name);//mike

alert(b1.arr);//brother,sister,baba

b1.arr.push('parents');

alert(b1.arr);//brother,sister,baba,parents

var b2 = obj(box);

alert(b2.name);//trigkit4

alert(b2.arr);//brother,sister,baba,parents

</script>

原型式繼承首先在obj()函數內部創建一個臨時性的構造函數 ，然后將傳入的對象作為這個構造函數的原型，最后返回這個臨時類型的一個新實例。

寄生式繼承

這種繼承方式是把原型式+工廠模式結合起來，目的是為了封裝創建的過程。

代碼如下:

<script>

function create(o){

var f= obj(o);

f.run = function () {

return this.arr;//同樣，會共享引用

};

return f;

}

</script>

組合式繼承的小問題

組合式繼承是js最常用的繼承模式，但組合繼承的超類型在使用過程中會被調用兩次；一次是創建子類型的時候，另一次是在子類型構造函數的內部

代碼如下:

<script>

function Parent(name){

this.name = name;

this.arr = ['哥哥','妹妹','父母'];

}

Parent.prototype.run = function () {

return this.name;

};

function Child(name,age){

Parent.call(this,age);//第二次調用

this.age = age;

}

Child.prototype = new Parent();//第一次調用

</script>

以上代碼是之前的組合繼承，那么寄生組合繼承，解決了兩次調用的問題。

寄生組合式繼承

代碼如下:

<script>

function obj(o){

function F(){}

F.prototype = o;

return new F();

}

function create(parent,test){

var f = obj(parent.prototype);//創建對象

f.constructor = test;//增強對象

}

function Parent(name){

this.name = name;

this.arr = ['brother','sister','parents'];

}

Parent.prototype.run = function () {

return this.name;

};

function Child(name,age){

Parent.call(this,name);

this.age =age;

}

inheritPrototype(Parent,Child);//通過這里實現繼承

var test = new Child('trigkit4',21);

test.arr.push('nephew');

alert(test.arr);//

alert(test.run());//只共享了方法

var test2 = new Child('jack',22);

alert(test2.arr);//引用問題解決

</script>

call和apply

全局函數apply和call可以用來改變函數中this的指向，如下：

代碼如下:

// 定義一個全局函數

function foo() {

console.log(this.fruit);

}

// 定義一個全局變量

var fruit = "apple";

// 自定義一個對象

var pack = {

fruit: "orange"

};

// 等價于window.foo();

foo.apply(window); // "apple",此時this等于window

// 此時foo中的this === pack

foo.apply(pack); // "orange"

更多信息請查看IT技術專欄