【JavaScript筆記 · 基礎篇(十)】物件導向程式設計之三：繼承機制

深入理解過JavaScript中的物件體系（基於建構函式（constructor）和原型物件（prototype））過後，再來學習JS中的繼承機制就很簡單啦~

一. 原型鏈單繼承

前兩篇部落格裡詳細介紹了建構函式（constructor）和原型物件（prototype），多多少少都已經講過繼承的知識了，這裡就再系統羅列一下。

講這一部分之前，我們先來定義一個父建構函式Animal()及其原型物件Animal.prototype——

// 父建構函式
function Animal (name,age){
    this.name = name;
    this.age = age;
};

// 父建構函式原型物件
Animal.prototype = {
    constructor:Animal,
    color:"white",
    sayName:function(){
        console.log("my name is",this.name);
    },
    sayAge:function(){
        console.log("my age is",this.age);
    }
};

這裡介紹三種單繼承的子建構函式的寫法，略有不同，按需而定：

1.1 第一步 —— 子類繼承父類的例項

具體分為兩個步驟：

1.1.1 呼叫父建構函式

通過call()方法把子類例項物件的this繫結到父建構函式來呼叫，這樣子類例項也會具有父類例項的屬性：

// 子建構函式
function Dog(name,age,gender){
    Animal.call(this,name,age);  // 借用建構函式
    this.gender = gender;
};

1.1.2 設定base屬性

// 子建構函式
function Dog(name,age,gender){
    this.base = Animal;
    this.base(name,age);
    this.gender = gender;
};

1.2 第二步 —— 子類繼承父類的原型

1.2.1 父類原型物件的克隆物件

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
// 健全關係

這裡切記是讓Dog.prototype等於父類原型物件的克隆物件（通過Object.create()方法生成），而不是直接等於Animal.prototype。否則之後對Dog.prototype的操作，也會連父類的原型Animal.prototype一起修改掉。

宣告一個Dog的例項物件wangcai，可以看到他可以正常訪問其祖先級建構函式Animal中的屬性和方法：

var wangcai = new Dog("wangcai",2,"male");
console.log(wangcai.name);
console.log(wangcai.color);
wangcai.sayName();


——————OUTPUT——————
wangcai
white
my name is wangcai

instanceof運算子用來判斷當前物件是否為某個建構函式的例項，返回一個布林值。wangcai對Dog和Animal都返回了true。

console.log(wangcai instanceof Dog);
console.log(wangcai instanceof Animal);


——————OUTPUT——————
true
true

1.2.2 父類的一個例項

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;  
// 健全關係

1.3

兩種方法：原型鏈繼承和借用建構函式。

// 子建構函式
function Dog(name,age,gender){
    Animal.call(this,name,age);  // 借用建構函式
    this.gender = gender;
};

Dog.prototype = new Animal();  // 原型鏈繼承
Dog.prototype.constructor = Dog;  // 健全關係
Dog.prototype.sayGender= function (){
    console.log("my gender is",this.gender);
};

// 建立例項物件
var dog = new Dog("zevin",21,"male");
console.log(dog.constructor);
dog.sayGender();
dog.sayName();


——————OUTPUT——————
[Function: Dog]
my gender is male
my name is zevin

二. 多重繼承