Javascript 原型继承和 Class 继承

问题

Javascript 原型继承和 Class 继承

答案

涉及⾯试题：原型如何实现继承？ Class 如何实现继承？ Class 本质是什么？

⾸先先来讲下 class ，其实在 JS 中并不存在类， class 只是语法糖，本质还是函数

class Person {}
Person instanceof Function // true

组合继承

组合继承是最常⽤的继承⽅式

function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

以上继承的⽅式核⼼是在⼦类的构造函数中通过 Parent.call(this) 继承⽗类的属性， 然后改变⼦类的原型为 new Parent() 来继承⽗类的函数。

这种继承⽅式优点在于构造函数可以传参，不会与⽗类引⽤属性共享，可以复⽤⽗类的函 数，但是也存在⼀个缺点就是在继承⽗类函数的时候调⽤了⽗类构造函数，导致⼦类的原 型上多了不需要的⽗类属性，存在内存上的浪费

寄⽣组合继承

这种继承⽅式对组合继承进⾏了优化，组合继承缺点在于继承⽗类函数时调⽤ 了构造函数，我们只需要优化掉这点就⾏了

function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
constructor: {
value: Child,
enumerable: false,
writable: true,
configurable: true
}
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

以上继承实现的核⼼就是将⽗类的原型赋值给了⼦类，并且将构造函数设置为 ⼦类，这样既解决了⽆⽤的⽗类属性问题，还能正确的找到⼦类的构造函数。

Class 继承

以上两种继承⽅式都是通过原型去解决的，在 ES6 中，我们可以使⽤ class 去 实现继承，并且实现起来很简单

class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
}
class Child extends Parent {
constructor(value) {
super(value)
this.val = value
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class 实现继承的核⼼在于使⽤ extends 表明继承⾃哪个⽗类，并且在⼦ 类构造函数中必须调⽤ super ，因为这段代码可以看成Parent.call(this, value) 。

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！