JavaScript高级语法|ES6——class类实现继承

还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦!
赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏 。
JavaScript高级语法|ES6——class类实现继承
文章图片

正文 1.实现类的继承 在ES6 中新增了 extends关键字,用于实现类的继承。
MDN中对 extends关键字的解释是这么说的:
**定义:****extends**关键字用于类声明或者类表达式中,以创建一个类,该类是另一个类的子类。
语法:
class ChildClass extends ParentClass { ... }

描述: extends关键字用来创建一个普通类或者内建对象的子类。
接下里展示一段示例代码展示一下ES6中 extends关键字实现的继承:
// 父类名字Parent class Parent { constructor(name, age) { this.name = name this.age = age }running () { console.log(this.name + ' 在跑步~') }} // 使用关键字创建子类Son继承父类 class Son extends Parent {} const P1 = new Son('Jee', 20) console.log(P1) // Son { name: 'Jee', age: 20 } P1.running() // Jee 在跑步~

只需要一个extends 关键字即可轻松实现继承父类中的constructor属性
2. Super关键字
注意:在子类(派生类)的构造函数中使用this或者返回默认对象之前,必须先通过super调用父类的构造函数!
【JavaScript高级语法|ES6——class类实现继承】super的使用位置有三个:
  1. 子类的构造函数
  2. 实例方法
  3. 静态方法
2.1:Super关键字使用方法一:
在子类(派生类)的构造函数中使用this或者返回默认对象之前,必须先通过super调用父类的构造函数,否则会报错。
比如:Son类中constructor属性中没有去掉super方法就会报错。
如下展示正确的使用方法一:
// 父类名字Parent class Parent { constructor(name, age) { this.name = name this.age = age }running () { console.log(this.name + ' 在跑步~') }} class Son extends Parent { constructor(name, age, height) { super() this.name = name this.age = age this.height = height } } const P1 = new Son('Jee', 20, '1.80') console.log(P1) // Son { name: 'Jee', age: 20, height: '1.80' }

上面示例代码中子类中有两句重复的逻辑语句,在父类中我们已经声明过了,在子类中再写一次就冗余了,让我们接下来看看有没有什么好的解决办法。
2.2:Super关键字使用方法二:
class Son extends Parent { constructor(name, age, height) { super(name,age) // this.name = name // this.age = age this.height = height } }

这就是上面的代码冗余的问题解决办法:可以将name和age写到super参数中就可以直接继承父类的逻辑,减少冗余代码。
3.重写父类方法 子类继承父类之后,子类中也可以直接调用父类的方法(最上方示例代码中有涉及这里就不再做展示了)。
但是在很多情况下,父类中的方法是达不到子类的要求的,那么子类就可以有一下两个操作:
3.1:重写父类方法
class Parent { constructor(name, age) { this.name = name this.age = age }running () { console.log(this.name + ' 在跑步~') }}class Son extends Parent { constructor(name, age, height) { super(name, age) this.height = height } // 重写父类方法 running () { console.log('我看见' + this.name + '在跑步~') }} const P1 = new Son('Jee', 20, '1.80') console.log(P1) P1.running()

3.2:新增方法,并在新增方法中调用父类方法内容
class Parent { constructor(name, age) { this.name = name this.age = age }parentMethod () { console.log('处理逻辑一') console.log('处理逻辑二') console.log('处理逻辑三') } }class Son extends Parent { constructor(name, age, height) { super(name, age) this.height = height } sonMethod () { // 调用父类的方法供子类使用 super.running() console.log('处理逻辑四') console.log('处理逻辑五') console.log('处理逻辑六') }} const P1 = new Son('Jee', 20, '1.80') console.log(P1) // Son { name: 'Jee', age: 20, height: '1.80' }P1.sonMethod() // 处理逻辑一 //处理逻辑二 //处理逻辑三 //处理逻辑四 //处理逻辑五 //处理逻辑六 //我看见Jee在跑步~

专栏分享:
JavaScript相关面试题就更新到这里啦,相关 Web前端面试题 可以订阅专栏哦
专栏地址:《面试必看》
面试刷题神器:牛客网
?名言警句:说能做的做说过的 \textcolor{red} {名言警句:说能做的做说过的} 名言警句:说能做的做说过的

?原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

??收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

??评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

    推荐阅读