JavaScript中的继承方式有哪些?

56 阅读1分钟

JS的几种继承方式?

- 原型链继承

image.png

image.png

优点:简单,容易实现;父类新增原型方法/原型属性,子类都能访问

缺点:引用类型的值会被实例共享和修改

- 构造函数继承

image.png

image.png

优点:解决了引用类型的值被实例修改的问题

缺点:不能继承父类原型上的属性和方法(如下所示);原型链丢失(上例中children1 不在Parent原型链上)

image.png

- 组合模式继承

image.png

image.png

优点:可以解决上面两种继承的问题

缺点:实例身上会调用两次父类的构造函数(如下所示) image.png

- 寄生组合式继承

image.png

image.png

image.png

寄生组合式继承是公认最理想的继承方式

- ES6中Class的继承

image.png

image.png

我们也有必要了解一下ES5和ES6继承机制的区别:ES5的继承机制是先创造一个独立的实例对象,然后将父类的方法添加到这个对象上面,即"实例在前,继承在后"。ES6的继承机制,是先将父类的属性和方法,加到一个空的对象上面,然后再将该对象作为子类的实例,即"继承在前,实例在后"