es6 中有類 class 的概念，類 class 的繼承是通過 extends 來實現的，es5 中是通過設定建構函式的 prototype 屬性，來實現繼承的，es6 與 es5 的繼承有什麼區別呢？下面通過 3 個 demo，來分析它們之間的區別。
1. es5 繼承
直接上**：
function a()
function b()
b.prototype = object.create(a.prototype,
});let b = new b();
複製****中，建構函式 b 繼承建構函式 a，首先讓建構函式 b 的 prototype 物件中的 __proto__ 屬性指向建構函式 a 的 prototype 物件，並且將建構函式 b 的 prototype 物件的 constructor 屬性賦值為建構函式 b，讓建構函式 b 的例項繼承建構函式 a 的原型物件上的屬性，然後在建構函式 b 內部的首行寫上 a.call(this)，讓建構函式 b 的例項繼承建構函式 a 的例項屬性。在 es5 中實現兩個建構函式之間的繼承，只需要做這兩步即可。下面六幅圖分別是，例項 b 的原型鏈及驗證圖，建構函式 b 的原型鏈及驗證圖，建構函式 a 的原型鏈及驗證圖。
例項 b 的原型鏈如下圖：
例項 b 的原型鏈驗證圖：
建構函式 b 的原型煉圖下圖：
建構函式 b 的原型鏈驗證圖圖：
建構函式 a 的原型煉圖下圖：
建構函式 b 的原型鏈驗證圖圖：
從上面 6 幅圖可知，建構函式 b 的例項 b 繼承了建構函式 a 的例項屬性，繼承了建構函式 a 的原型物件上的屬性，繼承了建構函式 object 的原型物件上的屬性。建構函式 b 是建構函式 function 的例項，繼承了建構函式 function 的原型物件上的屬性，繼承了建構函式 object 的原型物件上的屬性。 建構函式 a 是建構函式 function 的例項，繼承了建構函式 function 的原型物件上的屬性，繼承了建構函式 object 的原型物件上的屬性。可看出，建構函式 a 與 建構函式 b 並沒有繼承關係，即建構函式 b 沒有繼承建構函式 a 上面的屬性，在 es6 中，用 extends 實現兩個類的繼承，兩個類之間是有繼承關係的，即子類繼承了父類的方法，這是 es6 與 es5 繼承的第一點區別，下面通過 es6 的繼承來說明這一點。
2. es6 繼承
直接上**：
class a
}class b extends a
}let b = new b();
複製****中，類 b 通過 extends 關鍵字繼承類 a 的屬性及其原型物件上的屬性，通過在類 b 的 constructor 函式中執行 super() 函式，讓類 b 的例項繼承類 a 的例項屬性，super() 的作用類似建構函式 b 中的 a.call(this)，但它們是有區別的，這是 es6 與 es5 繼承的第二點區別，這個區別會在文章的最後說明。在 es6 中，兩個類之間的繼承就是通過 extends 和 super 兩個關鍵字實現的。下面四幅圖分別是，例項 b 的原型鏈及驗證圖，類 b 的原型鏈及驗證圖。
例項 b 的原型鏈如下圖：
例項 b 的原型鏈驗證圖：
類 b 的原型煉圖下圖：
類 b 的原型鏈驗證圖圖：
myarray.prototype = object.create(array.prototype,
});var colors = new myarray();
colors[0] = "red";
colors.length;
複製**這段**的思路就是，讓建構函式 myarray 繼承原生建構函式 array，然後驗證 myarray 的例項是否具有 array 例項的特性。
** 1 執行結果如下圖：
從結果可以看出，myarray 的例項並不具有 array 例項的特性，之所以會發生這種情況，是因為 myarray 的例項無法獲得原生建構函式 array 例項的內部屬性，通過 array.call(this) 也不行。
** 2：
class myarray extends array
}var arr = new myarray();
arr[0] = 12;
arr.length;
複製**** 2 執行結果如下圖：
從結果可以看出，通過 super()，myarray 的例項具有 array 例項的特性。
4. 總結
es6 與 es5 中的繼承有 2 個區別，第乙個是，es6 中子類會繼承父類的屬性，第二個區別是，super() 與 a.call(this) 是不同的，在繼承原生建構函式的情況下，體現得很明顯，es6 中的子類例項可以繼承原生建構函式例項的內部屬性，而在 es5 中做不到。
關注下面的標籤，發現更多相似文章
ES5與ES6繼承的區別
2.es6的繼承機制完全不同，實質上是先建立父類的例項物件this 所以必須先呼叫父類的super 方法 然後再用子類的建構函式修改this。3.es5的繼承時通過原型或建構函式機制來實現。4.es6通過class關鍵字定義類，裡面有構造方法，類之間通過extends關鍵字實現繼承。子類必須在con...
es5繼承與es6繼承
es5中的繼承方式 1.原型鏈繼承 缺點 1.建立例項時無法像父類建構函式傳遞引數 2.因為指定了原型，所以不能實現多繼承 3.父類建構函式上的屬性被所有子類共用，給原型上的屬性賦值會改變其他子類的屬性值 es5 const parent function name,age parent.proto...
ES6與ES5的繼承
類與es5中的建構函式寫法類似 區別在於屬性要放入constructor中，靜態方法和屬性實列不會繼承 子類與父類不會相互影響 es5 這三個函式是用來改變this的指向。聽不懂沒關係，我們來看個例子就明白。繼承 子類繼承父類所有屬性和行為，父類不受影響。目的 找到類之間的共性，精簡 提高 復用性，...