es6 class set get（ES6——class类实现继承）

时间2025-08-06 05:36:22分类IT科技浏览4701

导读：赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。...

赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏。

🍘正文

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在跑步~

🎃专栏分享：

JavaScript相关面试题就更新到这里啦，相关 Web前端面试题可以订阅专栏哦🥰

专栏地址：《面试必看》

⏳

名言警句：说能做的做说过的

\textcolor{red} {名言警句：说能做的做说过的}

名言警句：说能做的做说过的

✨

原创不易，还希望各位大佬支持一下

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

原创不易，还希望各位大佬支持一下

👍

点赞，你的认可是我创作的动力！

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