ES5和ES6中的继承

男娘i 2023-06-15 12:28 5阅读 0赞

Javascript中的继承一直是个比较麻烦的问题，prototype、constructor、\_\_proto\_\_在构造函数，实例和原型之间有的复杂的关系，不仔细捋下很难记得牢固。ES6中又新增了class和extends，和ES5搅在一起，加上平时很少自己写继承，简直乱成一锅粥。不过还好，画个图一下就清晰了，下面不说话了，直接上图，上代码。

## ES5 ##

ES5中的继承，看图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxOTk3ODQzOTEx_size_16_color_FFFFFF_t_70]

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中的继承，看图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxOTk3ODQzOTEx_size_16_color_FFFFFF_t_70 1]

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\_\_ 连接。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxOTk3ODQzOTEx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122155005179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxOTk3ODQzOTEx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxOTk3ODQzOTEx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191122155147956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxOTk3ODQzOTEx,size_16,color_FFFFFF,t_70