《javascript高級程序設計》學習記錄（四）

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)//truealert(test instanceof Brother);//false,test 是brother的超類alert(brother instanceof Child);//truealert(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"