javascript的ES6中class类的继承实现方式
前言
在ES6 中新增了
extends
关键字,用于实现类的继承。
1.实现类的继承
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调用父类的构造函数!
super的使用位置有三个:
- 子类的构造函数
- 实例方法
- 静态方法
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()
// 处理
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanegea
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24