代碼復(fù)用及其原則

代碼復(fù)用，顧名思義就是對(duì)曾經(jīng)編寫過的代碼的一部分甚至全部重新加以利用，從而構(gòu)建新的程序。在談及代碼復(fù)用的時(shí)候，我們首先可以想到的是繼承性。代碼復(fù)用的原則是：

優(yōu)先使用對(duì)象組合，而不是類繼承

在js中，由于沒有類的概念，因此實(shí)例的概念也就沒多大意義，js中的對(duì)象是簡(jiǎn)單的鍵-值對(duì)，可以動(dòng)態(tài)的創(chuàng)建和修改它們。

但在js中，我們可以使用構(gòu)造函數(shù)和new操作符來實(shí)例化一個(gè)對(duì)象，這與其他使用類的編程語言在語法上有其相似之處。

例如：

var trigkit4 = new Person();

js在調(diào)用構(gòu)造函數(shù)Person時(shí)似乎看起來是一個(gè)類，但其實(shí)際上仍然是一個(gè)函數(shù)，這讓我們產(chǎn)生了一些假定在類的基礎(chǔ)上的開發(fā)思路和繼承模式，我們可以稱之為“類式繼承模式”。

傳統(tǒng)的繼承模式是需要class關(guān)鍵字的，我們假定以上的類式繼承模式為現(xiàn)代繼承模式，這是一種不需要以類的方式考慮的模式。

類式繼承模式

看下面兩個(gè)構(gòu)造函數(shù)Parent()和Child()的例子：

<script type="text/javascript">
    function Parent(name){
        this.name = name || 'Allen';
    }
    Parent.prototype.say = function(){
        return this.name;
    }
    function Child(name){}
    //用Parent構(gòu)造函數(shù)創(chuàng)建一個(gè)對(duì)象，并將該對(duì)象賦值給Child原型以實(shí)現(xiàn)繼承
    function inherit(C,P){
        C.prototype = new P();//原型屬性應(yīng)該指向一個(gè)對(duì)象，而不是函數(shù)
    }
    //調(diào)用聲明的繼承函數(shù)
    inherit(Child,Parent);
</script>

當(dāng)使用new Child()語句創(chuàng)建一個(gè)對(duì)象時(shí)，它會(huì)通過原型從Parent()實(shí)例獲取它的功能，比如：

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

原型鏈

討論一下類式繼承模式下原型鏈的工作原理，我們將對(duì)象看做是內(nèi)存中某處的塊，該內(nèi)存塊包含數(shù)據(jù)以及指向其他塊的引用。當(dāng)用new Parent()語句創(chuàng)建一個(gè)對(duì)象時(shí)，就會(huì)創(chuàng)建如下圖左邊的這樣一個(gè)塊，這個(gè)塊保存了name屬性，如果想訪問say()方法，我們可以通過指向構(gòu)造函數(shù)Parent()的prototype（原型）屬性的隱式鏈接__proto__，便可訪問右邊區(qū)塊Parent.prototype。

那么，當(dāng)使用var kid = new Child()創(chuàng)建新對(duì)象時(shí)會(huì)發(fā)生什么？如下圖：

使用new Child()語句所創(chuàng)建的對(duì)象除了隱式鏈接__proto__外，它幾乎是空的。這種情況下，__proto__指向了在inherit()函數(shù)中使用new Parent()語句所創(chuàng)建的對(duì)象

當(dāng)執(zhí)行kid.say()時(shí)，由于最左下角的區(qū)塊對(duì)象并沒有say()方法，因此他將通過原型鏈查詢中間的區(qū)塊對(duì)象，然而，中間的區(qū)塊對(duì)象也沒有say()方法，因此他又順著原型鏈查詢到最右邊的區(qū)塊對(duì)象，而該對(duì)象正好有say()方法。完了嗎？

執(zhí)行到這里的時(shí)候并沒有完，在say()方法中引用了this.name，this指向構(gòu)造函數(shù)所創(chuàng)建的對(duì)象，在這里，它指向了new Child()這個(gè)區(qū)塊，然而，new Child()中并沒有name屬性，為此，將查詢中間區(qū)塊，而中間區(qū)塊正好有name屬性，至此，原型鏈的查詢完畢。

更詳細(xì)的討論請(qǐng)查看我這篇文章：javascript學(xué)習(xí)筆記（五）原型和原型鏈詳解

共享原型

本模式的法則在于：可復(fù)用的成員應(yīng)該轉(zhuǎn)移到原型中而不是放置在this中。因此，處于繼承的目的，任何值得繼承的東西都應(yīng)該放在原型中實(shí)現(xiàn)。所以，可以將子對(duì)象的原型與父對(duì)象的原型設(shè)置為相同即可，如下示例所示：

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

子對(duì)象和父對(duì)象共享同一個(gè)原型，并且可以同等的訪問say()方法。然而，子對(duì)象并沒有繼承name屬性

原型繼承

原型繼承是一種“現(xiàn)代”無類繼承模式?？慈缦聦?shí)例：

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

在原型模式中，并不需要使用對(duì)象字面量來創(chuàng)建父對(duì)象。如下代碼所示，可以使用構(gòu)造函數(shù)來創(chuàng)建父對(duì)象，這樣做的話，自身的屬性和構(gòu)造函數(shù)的原型的屬性都將被繼承。

<script type="text/javascript">
    //父構(gòu)造函數(shù)
    function Person(){
        this.name = "trigkit4";
    }
    //添加到原型的屬性
    Person.prototype.getName = function(){
        return this.name;
    };
    //創(chuàng)建一個(gè)新的Person類對(duì)象
    var obj = new Person();
    //繼承
    var kid = Object(obj);
    alert(kid.getName());//trigkit4
</script>

本模式中，可以選擇僅繼承現(xiàn)有構(gòu)造函數(shù)的原型對(duì)象。對(duì)象繼承自對(duì)象，而不論父對(duì)象是如何創(chuàng)建的，如下實(shí)例：

<script type="text/javascript">
    //父構(gòu)造函數(shù)
    function Person(){
        this.name = "trigkit4";
    }
    //添加到原型的屬性
    Person.prototype.getName = function(){
        return this.name;
    };
    //創(chuàng)建一個(gè)新的Person類對(duì)象
    var obj = new Person();
    //繼承
    var kid = Object(Person.prototype);
    console.log(typeof kid.getName);//function，因?yàn)樗谠椭?br />    console.log(typeof kid.name);//undefined，因?yàn)橹挥性撛褪抢^承的
</script>

最新評(píng)論