JavaScript代碼複用模式詳解

 代碼複用及其原則

代碼複用，顧名思義就是對曾經編寫過的代碼的一部分甚至全部重新加以利用，從而構建新的程式。在談及代碼複用的時候，我們首先可以想到的是繼承性。代碼複用的原則是：

優先使用對象組合，而不是類繼承

在js中，由於沒有類的概念，因此執行個體的概念也就沒多大意義，js中的對象是簡單的鍵-值對，可以動態建立和修改它們。

但在js中，我們可以使用建構函式和new操作符來執行個體化一個對象，這與其他使用類的程式設計語言在文法上有其相似之處。

例如：

var trigkit4 = new Person();

js在調用建構函式Person時似乎看起來是一個類，但其實際上仍然是一個函數，這讓我們產生了一些假定在類的基礎上的開發思路和繼承模式，我們可以稱之為“類式繼承模式”。

傳統的繼承模式是需要class關鍵字的，我們假定以上的類式繼承模式為現代繼承模式，這是一種不需要以類的方式考慮的模式。

類式繼承模式

看下面兩個建構函式Parent()和Child()的例子：

<script type="text/javascript">
    function Parent(name){
        this.name = name || 'Allen';
    }
    Parent.prototype.say = function(){
        return this.name;
    }
    function Child(name){}
    //用Parent建構函式建立一個對象，並將該對象賦值給Child原型以實現繼承
    function inherit(C,P){
        C.prototype = new P();//原型屬性應該指向一個對象，而不是函數
    }
    //調用聲明的繼承函數
    inherit(Child,Parent);
</script>

當使用new Child()語句建立一個對象時，它會通過原型從Parent()執行個體擷取它的功能，比如：

var kid = new Child();kid.say();//Allen

原型鏈

討論一下類式繼承模式下原型鏈的工作原理，我們將對象看做是記憶體中某處的塊，該記憶體塊包含資料以及指向其他塊的引用。當用new Parent()語句建立一個對象時，就會建立如下圖左邊的這樣一個塊，這個塊儲存了name屬性，如果想訪問say()方法，我們可以通過指向建構函式Parent()的prototype（原型）屬性的隱式連結__proto__，便可訪問右邊區塊Parent.prototype。

那麼，當使用var kid = new Child()建立新對象時會發生什嗎？如下圖：

使用new Child()語句所建立的對象除了隱式連結__proto__外，它幾乎是空的。這種情況下，__proto__指向了在inherit()函數中使用new Parent()語句所建立的對象

當執行kid.say()時，由於最左下角的區塊對象並沒有say()方法，因此他將通過原型鏈查詢中間的區塊對象，然而，中間的區塊對象也沒有say()方法，因此他又順著原型鏈查詢到最右邊的區塊對象，而該對象正好有say()方法。完了嗎？

執行到這裡的時候並沒有完，在say()方法中引用了this.name，this指向建構函式所建立的對象，在這裡，它指向了new Child()這個區塊，然而，new Child()中並沒有name屬性，為此，將查詢中間區塊，而中間區塊正好有name屬性，至此，原型鏈的查詢完畢。

共用原型

本模式的法則在於：可複用的成員應該轉移到原型中而不是放置在this中。因此，處於繼承的目的，任何值得繼承的東西都應該放在原型中實現。所以，可以將子物件的原型與父物件的原型設定為相同即可，如下樣本所示：

function inherit(C,P){
    C.prototype = P.prototype;
}

子物件和父物件共用同一個原型，並且可以同等的訪問say()方法。然而，子物件並沒有繼承name屬性

原型繼承

原型繼承是一種“現代”無類繼承模式。看如下執行個體：

<script type="text/javascript">
    //要繼承的對象
    var parent = {
        name : "Jack"  //這裡不能有分號哦
    };    //新對象
    var child = Object(parent);    alert(child.name);//Jack
</script>

在原型模式中，並不需要使用對象字面量來建立父物件。如下代碼所示，可以使用建構函式來建立父物件，這樣做的話，自身的屬性和建構函式的原型的屬性都將被繼承。

<script type="text/javascript">
    //父建構函式
    function Person(){
        this.name = "trigkit4";
    }
    //添加到原型的屬性
    Person.prototype.getName = function(){
        return this.name;
    };
    //建立一個新的Person類對象
    var obj = new Person();
    //繼承
    var kid = Object(obj);
    alert(kid.getName());//trigkit4
</script>

本模式中，可以選擇僅繼承現有建構函式的原型對象。對象繼承自對象，而不論父物件是如何建立的，如下執行個體：

<script type="text/javascript">
    //父建構函式
    function Person(){
        this.name = "trigkit4";
    }
    //添加到原型的屬性
    Person.prototype.getName = function(){
        return this.name;
    };
    //建立一個新的Person類對象
    var obj = new Person();
    //繼承
    var kid = Object(Person.prototype);
    console.log(typeof kid.getName);//function，因為它在原型中
    console.log(typeof kid.name);//undefined，因為只有該原型是繼承的
</script>