ES5和ES6中的繼承

Javascript中的繼承一直是個比較麻煩的問題，prototype、constructor、__proto__在構造函數，實例和原型之間有的複雜的關係，不仔細捋下很難記得牢固。ES6中又新增了class和extends，和ES5攪在一起，加上平時很少自己寫繼承，簡直亂成一鍋粥。不過還好，畫個圖一下就清晰了，下面不說話了，直接上圖，上代碼。

ES5

ES5中的繼承，看圖：

function Super() {}
 
function Sub() {}
Sub.prototype = new Super();
Sub.prototype.constructor = Sub;
 
var sub = new Sub();
 
Sub.prototype.constructor === Sub; // ② true
sub.constructor === Sub; // ④ true
sub.__proto__ === Sub.prototype; // ⑤ true
Sub.prototype.__proto__ == Super.prototype; // ⑦ true

ES5中這種最簡單的繼承，實質上就是將子類的原型設置爲父類的實例。

ES6

ES6中的繼承，看圖：

class Super {}
 
class Sub extends Super {}
 
var sub = new Sub();
 
Sub.prototype.constructor === Sub; // ② true
sub.constructor === Sub; // ④ true
sub.__proto__ === Sub.prototype; // ⑤ true
Sub.__proto__ === Super; // ⑥ true
Sub.prototype.__proto__ === Super.prototype; // ⑦ true

所以

ES6和ES5的繼承是一模一樣的，只是多了class 和extends ，ES6的子類和父類，子類原型和父類原型，通過__proto__ 連接。