ES5和ES6中的繼承 圖解

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

ES5

ES5中的繼承，看圖：

 1 function Super() {}
 2  
 3 function Sub() {}
 4 Sub.prototype = new Super();
 5 Sub.prototype.constructor = Sub;
 6  
 7 var sub = new Sub();
 8  
 9 Sub.prototype.constructor === Sub; // ② true
10 sub.constructor === Sub; // ④ true
11 sub.__proto__ === Sub.prototype; // ⑤ true
12 Sub.prototype.__proto__ == Super.prototype; // ⑦ true

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

 

ES6

ES6中的繼承，看圖：

 1 class Super {}
 2  
 3 class Sub extends Super {}
 4  
 5 var sub = new Sub();
 6  
 7 Sub.prototype.constructor === Sub; // ② true
 8 sub.constructor === Sub; // ④ true
 9 sub.__proto__ === Sub.prototype; // ⑤ true
10 Sub.__proto__ === Super; // ⑥ true
11 Sub.prototype.__proto__ === Super.prototype; // ⑦ true

 

因此

ES6和ES5的繼承是如出一轍的，只是多了class 和extends ，ES6的子類和父類，子類原型和父類原型，經過__proto__ 鏈接。