ES6——class类实现继承

这篇具有很好参考价值的文章主要介绍了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调用父类的构造函数!

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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
文章来源地址https://www.toymoban.com/news/detail-409926.html

到了这里,关于ES6——class类实现继承的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6 中的类(class)

    ES6 引入的 class 具有定义类的能力。类是 ECMAScript 中新的基础性语法糖 。虽然 ES6 表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的依旧是原型和构造函数的概念。(笔记内容参考《 JavaScript 高级程序设计(第 4 版)》章节 8.4 类 )。以前在笔记《

    2023年04月20日
    浏览(77)
  • ES6学习-Class类

    constructor 构造方法 this 代表实例对象 方法之间不需要逗号分隔,加了会报错。 类的数据类型就是函数,类本身就指向构造函数。 类的所有方法都定义在类的 prototype 属性上面 类的内部所有定义的方法,都是不可枚举的(non-enumerable) ES6类内部定义的方法不可枚举;ES5可以

    2024年02月14日
    浏览(30)
  • 【ES6】class静态方法

    类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。 上面代码中,Foo类的classMethod方法前有static,表明该方法是一个静态方法,可以直

    2024年02月09日
    浏览(30)
  • es6(五)—— class(类)详解

    一:构造函数 在了解class (类)的使用之前,需要先了解一下什么是构造函数 1:定义:通常首字母大写,用于和普通函数区分(不大写也可以,但是前端为了更好区分使用大写)。 2:区别:构造函数和普通函数的区别就是调用方式的不同,普通函数是直接调用,而构造函

    2024年02月03日
    浏览(29)
  • JavaScript:ES6中类与继承

    在JavaScript编程中,ES6引入了一种更现代、更清晰的方式来定义对象和实现继承,那就是通过类和继承机制。本文将以通俗易懂的方式解释ES6中类与继承的概念,帮助你更好地理解和应用这些特性。 1. 类的创建与使用 类是一种模板,用于创建对象。在ES6中,我们可以使用 cl

    2024年02月13日
    浏览(42)
  • 【ES6】Class中this指向

    先上代码: 正常运行的代码: 输出: 单独调用函数printName: 输出: debugger调试一下,看看什么情况,调试代码: 调试界面,this显示undefined,在单独调用时,this的指向是undefined。在单独调用的场景下,要如何才能解决该问题呢?下面给出两种种比较简单的解决方法。 1、在

    2024年02月09日
    浏览(33)
  • ES6如何声明一个类?类如何继承?

    引言 在ES6(ECMAScript 2015)中,引入了类(class)的概念,使得JavaScript的面向对象编程更加直观和易于理解。类提供了一种结构化的方式来定义对象的属性和方法,并且支持继承。在本文中,我们将深入探讨如何在ES6中声明一个类以及如何实现类的继承。 1. 声明一个类 在ES6中

    2024年02月08日
    浏览(29)
  • ES5 构造函数与ES6 Class的区别

    Class 类中不存在变量提升 class内部会启用严格模式 class的所有方法都是不可枚举的 class 必须使用new调用 class 内部无法重写类名 class 的继承有两条继承链 一条是: 子类的__proto__ 指向父类 另一条: 子类prototype属性的__proto__属性指向父类的prototype属性. es6的子类可以通过__pro

    2024年02月06日
    浏览(101)
  • ES6类-继承-Symbol-模版字符串

    目录 类  继承 ES5 如何继承 ES6继承 Symbol 用途 可以产生唯一的值,独一无二的值 解决命名冲突 getOwnPropertySymbols()  作为全局注册表 缓存  Symbol.for()  消除魔术字符串  模版字符串 在javascript语言中,生成实例对象使用构造函数;ES6提供了类Class这个概念,作为对象的模板。定

    2024年02月16日
    浏览(48)
  • 【ES6】中构造函数的语法糖 —— Class(类)

            在现代前端开发中,JavaScript的面向对象编程成为了主流。ES6引入了class,使得开发者可以更方便地使用面向对象的方式编写代码,更接近传统语言的写法。ES6的class可以看作是一个语法糖,它的绝大部分功能ES5都可以做到,新的class写法只是让对象原型的写法更

    2024年02月16日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包