JavaScript物件導向繼承基礎講解

說好的講解JavaScript繼承，可是遲遲到現在講解。廢話不多說，直接進入正題。
 
既然你想瞭解繼承，證明你對JavaScript物件導向已經有一定的瞭解，如還有什麼不理解的可以參考詳解JavaScript中物件導向基礎知識，接下來講一般通過那些方法完成JavaScript的繼承。
 
原型鏈
 
JavaScript中實現繼承最簡單的方式就是使用原型鏈，將子類型的原型指向父類型的執行個體即可，即“子類型.prototype = new 父類型();”，實現方法如下：
 // 為父類型建立建構函式
function SuperType() {
    this.name = ['wuyuchang', 'Jack', 'Tim'];
    this.property = true;
}

// 為父類型添加方法
SuperType.prototype.getSuerperValue = function() {
    return this.property;
}

// 為子類型建立建構函式
function SubType() {
    this.test = ['h1', 'h2', 'h3', 'h4'];
    this.subproperty = false;
}

// 實現繼承的關鍵步驟，子類型的原型指向父類型的執行個體
SubType.prototype = new SuperType();

// 在此處給子類型添加方法，一定要在實現繼承之後，否則會在將指標指向父類型的執行個體，則方法為空白
SubType.prototype.getSubValue = function() {
    return this.subproperty;
}

/* 以下為測試程式碼範例 */
var instance1 = new SubType();
instance1.name.push('wyc');
instance1.test.push('h5');
alert(instance1.getSuerperValue());        // true
alert(instance1.getSubValue());            // false
alert(instance1.name);                    // wuyuchang,Jack,Tim,wyc
alert(instance1.test);                    // h1,h2,h3,h4,h5

var instance2 = new SubType();
alert(instance2.name);                    // wuyuchang,Jack,Tim,wyc
alert(instance2.test);                    // h1,h2,h3,h4
可以看到如上的代碼就是通過原型鏈實現的一個簡單的繼承，但看到測試程式碼範例中還是存在些問題。相信看了我的博文詳解JavaScript中物件導向基礎知識的童鞋一定知道原型鏈代碼存在的第一個問題是由於子類型的原型是父類型的執行個體，也就是子類型的原型中包含的父類型的屬性，從而導致參考型別值的原型屬性會被所有執行個體所共用。以上代碼的instance1.name.push(‘wyc’);就可以證明此問題的存在。而原型鏈的第二個問題就是：在建立子類型的執行個體時，不能向超類型的建構函式中傳遞參數。因此我們在實際開發中，很少單獨使用原型鏈。
 
借用建構函式
 
為瞭解決原型鏈中存在的兩個問題，開發人員開始使用一種叫做借用建構函式的技術來解決原型鏈中存在的問題。這種技術的實現思路也挺簡單，只需要在子類型的建構函式內調用父類型的建構函式即可。別忘了，函數只不過是在特定環境中執行代碼的對象，因此可以通過apply()或call()方法執行建構函式。代碼如下：
 // 為父類型建立建構函式
function SuperType(name) {
    this.name = name;
    this.color = ['pink', 'yellow'];
    this.property = true;

    this.testFun = function() {
        alert('http://www.cnblogs.com/wuyuchang/');
    }
}

// 為父類型添加方法
SuperType.prototype.getSuerperValue = function() {
    return this.property;
}

// 為子類型建立建構函式
function SubType(name) {
    SuperType.call(this, name);
    this.test = ['h1', 'h2', 'h3', 'h4'];
    this.subproperty = false;
}

// 在此處給子類型添加方法，一定要在實現繼承之後，否則會在將指標指向父類型的執行個體，則方法為空白
SubType.prototype.getSubValue = function() {
    return this.subproperty;
}

/* 以下為測試程式碼範例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();                        // http://www.cnblogs.com/wuyuchang/
alert(instance1.name);                        // wuyuchang,Jack,Nick,hello
// alert(instance1.getSuerperValue());        // error 報錯
alert(instance1.test);                        // h1,h2,h3,h4,h5       
alert(instance1.getSubValue());                // false       
alert(instance1.color);                        // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();                        // http://www.cnblogs.com/wuyuchang/
alert(instance2.name);                        // wyc       
// alert(instance2.getSuerperValue());        // error 報錯
alert(instance2.test);                        // h1,h2,h3,h4
alert(instance2.getSubValue());                // false
alert(instance2.color);                        // pink,yellow
可以看到以上代碼中子類型SubType的建構函式內通過調用父類型”SuperType.call(this, name);”，從而實現了屬性的繼承，也可以在子類型建立執行個體的時候為父類型傳遞參數了，但新的問題又來了。可以看到我在父類型的建構函式中定義了一個方法：testFun，在父類型的原型中定義了一個方法：getSuperValue。可是在執行個體化子類型後仍然是無法調用父類型的原型中定義的方法getSuperValue，只能調用父類型中建構函式的方法：testFun。這就同建立對象中只使用建構函式模式一樣，使得函數沒有複用性可言。考慮到這些問題，借用建構函式的技術也是很少單獨使用的。
 
組合繼承（原型鏈+借用建構函式）
 
顧名思義，組合繼承就是結合使用原型鏈與借用建構函式的優點，組合而成的一個模式。實現也很簡單，既然是結合，那當然結合了兩方的優點，即原型鏈繼承方法，而在建構函式繼承屬性。具體代碼實現如下：
 // 為父類型建立建構函式
function SuperType(name) {
    this.name = name;
    this.color = ['pink', 'yellow'];
    this.property = true;

    this.testFun = function() {
        alert('http://www.cnblogs.com/wuyuchang/');
    }
}

// 為父類型添加方法
SuperType.prototype.getSuerperValue = function() {
    return this.property;
}

// 為子類型建立建構函式
function SubType(name) {
    SuperType.call(this, name);
    this.test = ['h1', 'h2', 'h3', 'h4'];
    this.subproperty = false;
}

SubType.prototype = new SuperType();

// 在此處給子類型添加方法，一定要在實現繼承之後，否則會在將指標指向父類型的執行個體，則方法為空白
SubType.prototype.getSubValue = function() {
    return this.subproperty;
}

/* 以下為測試程式碼範例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();                        // http://www.cnblogs.com/wuyuchang/
alert(instance1.name);                        // wuyuchang,Jack,Nick,hello
alert(instance1.getSuerperValue());            // true
alert(instance1.test);                        // h1,h2,h3,h4,h5       
alert(instance1.getSubValue());                // false       
alert(instance1.color);                        // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();                        // http://www.cnblogs.com/wuyuchang/
alert(instance2.name);                        // wyc       
alert(instance2.getSuerperValue());            // true
alert(instance2.test);                        // h1,h2,h3,h4
alert(instance2.getSubValue());                // false
alert(instance2.color);                        // pink,yellow
以上代碼通過SuperType.call(this, name);繼承父類型的屬性，通過SubType.prototype = new SuperType();繼承父類型的方法。以上代碼很方便的解決了原型鏈與借用建構函式所遇到的問題，成為了JavaScript中最為常用的執行個體繼承的方法。但混合模式也並非沒有缺點，可以看到在以上代碼中在繼承方法的時候實際已經繼承了父類型的屬性，只不過此時對於參考型別屬於共用的，因此在子類型的建構函式內在次調用父類型的建構函式從而繼承了父類型的屬性而去覆蓋了原型中所繼承的屬性，這樣調用兩次建構函式顯然沒有必要，但有什麼方法可以解決呢？在解決此問題時先看以下兩個模式。
 
原型式繼承
 
原型式繼承的的實現方法與普通繼承的實現方法不同，原型式繼承並沒有使用嚴格意義上的建構函式，而是藉助原型可以基於已有的對象建立新對象，同時還不必因此建立自訂類型。具體代碼如下：
 function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
程式碼範例：
 /* 原型式繼承 */
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var person = {
    name : 'wuyuchang',
    friends : ['wyc', 'Nicholas', 'Tim']
}

var anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Bob');

var anotherPerson2 = object(person);
anotherPerson2.name = 'Jack';
anotherPerson2.friends.push('Rose');

alert(person.friends);    // wyc,Nicholas,Tim,Bob,Rose
寄生式繼承
 /* 寄生式繼承 */
function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
        alert('hi');
    }
    return clone;
}
使用樣本：
 /* 原型式繼承 */
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
    
/* 寄生式繼承 */
function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
        alert('hi');
    }
    return clone;
}

var person = {
    name : 'wuyuchang',
    friends : ['wyc', 'Nicholas', 'Rose']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();
寄生組合式繼承
 
前面說過了JavaScrip中組合模式實現繼承的缺點，現在我們就來解決它的缺點，實現思路是，對於建構函式繼承屬性，而原型鏈的混成形式繼承方法，即不用在繼承方法的時候執行個體化父類型的建構函式。代碼如下：
 function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

/* 寄生組合式繼承 */
function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
而在使用時只需要將組合模式中的“SubType.prototype = new SuperType();”這行代碼替換成inheritPrototype(subType, superType);即可。寄生組合式繼承的高效率體現在它只調用了一次父類型建構函式，避免了建立不必要的或多餘的屬性。與此同時，原型鏈還能保持不變，因此，還能夠正常使用instanceof和isPrototypeof()。這也是目前來說最理想的繼承方式了，目前也在向這種模式轉型。（YUI也使用了這種模式。）
 
此博文參考《JavaScript進階程式設計第3版》，代碼為經過改寫，更具體並加了注釋使大家更易懂。如對JS繼承方面有獨到見解的童鞋不別吝嗇，回複您的見解供大家參考！