ES6 class类实现继承实例详解

Blossom ·

更新时间:2024-09-20

· 578 次阅读

1.实现类的继承

2. Super关键字

2.1：Super关键字使用方法一：

2.2：Super关键字使用方法二：

3.重写父类方法

3.1：重写父类方法

3.2：新增方法，并在新增方法中调用父类方法内容

总结

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调用父类的构造函数！

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()
// 处理逻辑一
//处理逻辑二
//处理逻辑三
//处理逻辑四
//处理逻辑五
//处理逻辑六
//我看见Jee在跑步~

总结

到此这篇关于ES6 class类实现继承的文章就介绍到这了,更多相关ES6 class类实现继承内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

class类 es6 继承 class

1024 个赞