JavaScript繼承與彙總

標籤：code   ring   eth   books   src   div   地方   訪問   理解   

一，繼承

第一種方式：類與被繼承類直接耦合度高

1，首先，準備一個可以被繼承的類（父類），例如

   //建立一個人員類    function Person(name) {//現在Person裡面的域是由Person裡面的  來this來控制的        this.name=name;    }

2，然後，有個需要繼承父類的子類

 function Teacher(name,books) {           Person.call(this,name);//相當於java中的super函數 在new Teacher時將Person的name初始化           this.books=books;    }

 說明一下:

(1)call方法可以將一個函數的物件內容從初始化變成由this來決定                     一個類去控制另一個類

(2)Teacher類去控制 Person類 用Teacher域裡面的 this來控制Person域裡面的 this
(3)調用 Perosn的建構函式，因為Perosn沒有用 new 所以是個Null 物件（模板）     顯示調用call方法，可以初始化 Person

 

3，最後，實現繼承

（步驟1）先繼承

 Teacher.prototype=new Person();    Teacher.prototype.constructor=Teacher;//確保繼承後任然是Teacher自己的建構函式

 （步驟2）為子類擴充一些方法，用於訪問從父類繼承的內容

 Teacher.prototype.getBook=function () {        return this.name+"  "+this.books;    }

（步驟3）使用已經繼承好的類

 var jim=new Teacher("Jim","Javascript");    alert(jim.getBook())

總結：此種方法是直接在子類中顯示調用父類，耦合度高，複用性差。

 

第二種方式，使用封裝，完成程式中所用繼承操作

1，首先，準備一個可以被繼承的類（父類），例如

//建立一個人員類    function Person(name) {//現在Person裡面的域由Person裡面的來this來控制的        this.name=name;    }

2,建立extend函數為了程式中所有的繼承操作（最重要的地方）

    /*建立extend函數為了程式中所有的繼承操作*/    //subClass:子類  superClass：超類（2）    function extend(subClass,superClass) {        //1，使子類原型屬性等於父類的原型屬性        //初始化一個中間Null 物件，目的是為了轉換主父關係        var F = function () {};        F.prototype = superClass.prototype;
        //2， 讓子類繼承F        subClass.prototype = new F();        subClass.prototype.constructor = subClass;
        //3，為子類增加屬性 superClass ==》原型鏈的引用        subClass.superClass = superClass.prototype;
        //4，增加一個保險，就算你的原型類是超類（Object）那麼也要把你的建構函式層級降下來        if (superClass.prototype.constructor == Object.prototype.constructor) {            superClass.prototype.constructor = superClass;        }    }

3，有一個需要繼承其他類的子類

 function Author(name,books) {            Author.superClass.constructor.call(this,name);//沒有直接寫父類，降低了耦合度            //Person.call(this,name)   直接寫Person代表其建構函式            this.books=books;            this.getBooks=function () {               return this.name+"  "+this.books ;            }        }

4，最後，實現繼承

 //繼承        extend(Author,Person);//（子類，父類）

5，使用已經繼承好的類

var peter=new Author("Peter","Javascript");        alert(peter.getBooks());

方式二圖解為：

這裡可能會有一個疑問就是為啥要使用中間類？？？

這裡假如沒有中間類的話，我們在執行個體化子類時就需要為父類傳遞一些相應的參數，這樣的話，該句代碼

 Author.superClass.constructor.call(this,name);

 

就不能放在子類（Author）中，而是需要放入到extend中，這樣的話代碼的通用性就很低，故此需要使用中間類。

 

二，彙總

使用彙總的原因，有的時候不需要嚴格的繼承，我們真正需要的是一個類（或幾個類）中的一些函數。故此我們可以使用彙總 也就是使用 摻元類

 對於彙總有兩種情況

第一種是彙總到 var a={}空類或者不是用function聲明的類中

1，首先，需要一個合適的可以被彙總的類（給體），此時需要在本類的內部進行擴充屬性，方法

 

var JSON={//寫到類的內部        toJsonString:function () {            var output=[];            for(key in this){//this代表那個調用，就指向那個一個對象                output.push(key+"---->"+this[key]);            }            return output;        }    };

 

2，製作一個彙總函式（最重要）

  /*彙總函式     receivingClass：接受彙總內容的類     givingClass：被彙總的目標類    * */    function mixin(receivingClass,givingClass){        for(methodName in givingClass){            if(!receivingClass.__proto__[methodName]){//判斷當前原型中是否含有即將要被彙總的方法，若沒有則彙總進來                receivingClass.__proto__[methodName]=givingClass[methodName];//直接獲得類中的方法，因為方法是直接寫在方法內部的。            }        }    }

3，接受彙總的類（受體）

 var get={name:"Text",age:20};

4，實現將JSON類的方法彙總到類get中

mixin(get,JSON);//(受體，給體)

5，使用get類中彙總的方法

 document.write(get.toJsonString().join(","));

第二種是彙總用function聲明的類中  var a=function(){}

1，首先，需要一個合適的可以被彙總的類（給體），此時需要在本類的原型對象上進行擴充屬性，方法

var JSON={}; JSON.prototype={//寫到類的原型對象上 toJsonString:function () { var output=[]; for(key in this){//this代表那個調用，就指向那個一個對象 output.push(key+"---->"+this[key]); } return output; } }

2，製作一個彙總函式

（2）製作彙總函式(receivingClass中彙總givingClass中的屬性，或者方法) function mixin(receivingClass,givingClass) { for(methodName in givingClass.prototype){ if(!receivingClass.prototype[methodName]){//判斷當前原型中是否含有即將要被彙總的方法，若沒有則彙總進來 receivingClass.prototype[methodName]=givingClass.prototype[methodName]; } } }

3，接受 彙總的類（受體）

var o=function () { this.name="彙總"; this.age=19; }

4，實現JSON類到o類的彙總（將JSON類中的方法彙總到o類中）

mixin(o,JSON);//（受體，給體）

5,使用o類中彙總而來的方法

var useO=new o(); document.write(useO.toJsonString().join(","));

第二種圖解理解為：

 

 該方式屬於類o上一層的彙總。

JavaScript繼承與彙總