摘要：繼承傳統的面向對象語言，繼承是類與類之間的關系。原型繼承原型定義原型就是指構造函數的屬性所引用的對象。創建構造函數創建的實例對象張三李四就是對象的原型也是的原型在原型上創建一個屬性運行和，并對比是否為同一個方法。

原文鏈接：http://www.hansmkiii.com/2018/07/06/javascript-node-1/

" 面向對象、原型、繼承 "

為了了解 面向對象 與 面向過程 的區別，我們先看案例1。

案例1：一輛汽車以60km/h，在一條長度1200km的公路上行駛，求其行駛完全程需要的時間。

/* 面向過程 */
var time = 1200 / 60; // 計算汽車行駛時間
console.log(time); // 打印結果

/* 面向對象 */
// 創建公路對象
var road = {
    long: 1200 // 公路長度
};

// 創建小汽車對象
var car = {
    speed: 60, // 汽車速度
    road: road, // 汽車在公路上行駛，與公路對象關聯（road已聲明）
    run: function(){ // 汽車行駛的方法，返回行駛速度
        return this.road.long / this.speed;
    }
}

var r = car.run(); // 執行汽車行駛的方法，返回行駛速度
console.log(r); // 打印結果（30）

雖然看上去面向對象比面向過程要復雜了很多，但是如果考慮到以后可能會改變某個變量（公路長度或汽車行駛速度），面向過程需要修改運算過程中的值，而面向對象只需要在執行運算方法之前通過car.speed = 40修改 car 對象的 speed 屬性即可，可以有效避免修改錯誤和修改多處。

當程序復雜程度到達一定的量級，面向對象可以提高程序的可維護性。

如果后面我們的需求改變了，依舊需要汽車對象，但是要返回汽車的顏色。
如果是面向過程開發，我們需要刪除掉面向過程的所有代碼，重新寫代碼返回汽車的顏色。而面向對象則不需要刪除原來定義的對象，只需要給 car 對象增加一個 color 屬性，擴展 car 對象。

所以，面向對象程序設計的優勢有：

提高代碼的可維護性

提高代碼的可擴展性

HTML

111
222
333
444

JS

// 給div添加背景顏色
// 面向過程
var divs = document.getElementsByTagName("div");
for (var i=0; i
如果多處需要相同的功能，面向對象的方法可以提高代碼的復用性。

2、繼承
傳統的面向對象語言，繼承是 類 與 類 之間的關系。而JS中，由于沒有 類 的概念。所以是 對象 與 對象 之間的關系。
定義：在JS中，繼承就是指使一個對象有權去訪問另一個對象的能力。
比如：對象A能繼承對象B的成員（屬性和方法），那么，對象A就繼承于對象B。
2.1 原型繼承
原型
定義：原型就是指構造函數的prototype屬性所引用的對象。
目的：解決同類對象數據共享問題。
示例：
// 創建構造函數 Person
function Person(name, age){ 
    this.name = name;
    this.age = age;
    this.say = function(){
        console.log("hello!")
    }
} 
// 創建 Person 的實例對象
var p1 = new Person("張三", 19);
var p2 = new Person("李四", 20);
// Person.prototype 就是對象 p1 的原型
// p1.__proto__ 也是 p1 的原型
console.log(Person.prototype === p1.__proto__); // true
此時，p1和p2都有繼承了構造函數 Person 的 say 屬性，在控制臺打印查看：
p1.say(); // hello!
p2.say(); // hello!
這是 構造函數繼承，那么 p1 的 say 和 p2 的 say 是不是同一個方法呢？
// 打印查看
console.log(p1.say === p2.say); // false
查看結果發現兩個 say 方法并不是同一個，所以在創建實例對象的時候開辟了兩塊內存分別存放了 p1.say 和 p2.say，這就導致了內存的浪費，所以我們需要通過原型共享數據來解決這個問題。
// 創建構造函數 Person
function Person(name, age){ 
    this.name = name;
    this.age = age;
} 
// 創建 Person 的實例對象
var p1 = new Person("張三", 19);
var p2 = new Person("李四", 20);
// Person.prototype 就是對象 p1 的原型
// p1.__proto__ 也是 p1 的原型
// 在原型上創建一個 say 屬性
Person.prototype.say = function(){
    console.log("hello!");
}
// 運行 p1.say 和 p2.say，并對比是否為同一個方法。
p1.say(); // hello!
p2.say(); // hello!
console.log(p1.say === p2.say); // true
如此便通過原型繼承實現了數據共享。
構造函數中可以顯式的指定return語句，但是如果返回的數據類型為簡單數據類型，或者null undefined值都會被忽略，依舊返回的是構造函數的實例對象
2.2 類式繼承
類式繼承通過call(this, ... , ...)或apply(this, arguments)方法改變this指向實現繼承。
// 創建 Person 構造函數
function Person(name, age) {
    this.name = name;
    this.age = age;
}
// 創建 Student 構造函數
function Student(name, age, id){
    this.name = name;
    this.age = age;
    this.id = id;
}
Student對象是 Person 對象的一個分支，可以繼承Person的屬性。  
所以Student 屬性可以這樣寫：
function Student(name, age, id){
    Person.call(this, name, age);
    this.id = id;
}

var s = new Student("張三","20","123456789");
console.log(s); // {name: "張三", age: "20", id: "123456789"}
或者
function Student(name, age, id){
    Person.apply(this, arguments); // arguments 是一個數組 也可以寫成 [name, age]
    this.id = id;
}

var s = new Student("張三","20","123456789");
console.log(s); // {name: "張三", age: "20", id: "123456789"}
2.3 組合繼承
通過前面對 原型繼承 和 類式繼承 的了解，我們發現 原型繼承 用于繼承靜態數據， 類式繼承 用于繼承動態參數，所以我們有時候需要同時使用 原型繼承 和 類式繼承，也就是 組合繼承。
function Person(name, age) {
    this.name = name;
    this.age = age;
}
// 類式繼承
function Student(name, age, id){
    Person.call(this, name, age);
    this.id = id;
}
// 原型繼承
Student.prototype.class = function(){
    console.log("English");
}
var s = new Student("張三", 20, "123456");
s.class();
2.4 extend方法
var a = {
    name: "g"
};

var b = {
    print: function() {
        console.log("Hello,JS!")
    }
}
// 將 parent 對象上的成員賦值給 child
function extend(child, parent) {
    for (var pro in parent) {
        // child[pro] = parent[pro];
        // 缺點：會將parent對象的原型上的成員一同復制過來，所以需要先判斷屬性是否為parent私有的
        if (parent.hasOwnProperty(pro)){
            child[pro] = parent[pro];
        }
    }
}
extend(a,b);
a.print();
以上四種繼承方式是開發過程中最常見的幾種，具體應用場景視情況而定，甚至可以多個組合使用