JS中的繼承方式實例詳解

這篇文章主要介紹了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 = &#39;mike&#39;;
    }
    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 = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        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(&#39;bill&#39;);
    alert(test.name);//mike,jack,smith,bill
</script>

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

組合繼承

#程式碼如下：

<script>
    function Parent(age){
        this.name = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        this.age = age;
    }
    Parent.prototype.run = function () {
        return this.name  + &#39; are both&#39; + 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 : &#39;trigkit4&#39;,
        arr : [&#39;brother&#39;,&#39;sister&#39;,&#39;baba&#39;]
    };
    var b1 = obj(box);
    alert(b1.name);//trigkit4
    b1.name = &#39;mike&#39;;
    alert(b1.name);//mike
    alert(b1.arr);//brother,sister,baba
    b1.arr.push(&#39;parents&#39;);
    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 = [&#39;哥哥&#39;,&#39;妹妹&#39;,&#39;父母&#39;];
    }
    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 = [&#39;brother&#39;,&#39;sister&#39;,&#39;parents&#39;];
    }
    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(&#39;trigkit4&#39;,21);
    test.arr.push(&#39;nephew&#39;);
    alert(test.arr);//
    alert(test.run());//只共享了方法
    var test2 = new Child(&#39;jack&#39;,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"

以上是JS中的繼承方式實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！