ES5和ES6中的繼承

Javascript中的繼承一直是個比較麻煩的問題，prototype、constructor、__proto__在構造函數，實例和原型之間有的複雜的關係，不仔細捋下很難記得牢固。ES6中又新增了class和extends，和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

 

 

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