Js基础知识-如何使用class实现继承

ES6引入了Class(类)这个概念,通过class关键字可以定义类。该关键字的出现使得其在对象写法上更加清晰,更像是一种面向对象的语言。

如何实现一个class?

我们会需要用到: constructor

constructor是一个构造方法,用来接收参数
this代表的是实例对象

在实现class时,class更像是搭建一个模板,这个模板会有一些属性 方法
举个栗子

  1. 创建一个Student的类
  2. 构建一些他的属性
// 创建一个Student的类
class Student{
  // 属性
  constructor(name,number){
    this.name=name
    this.number=number
  }
  // 方法
  sayHi(){
    console.log(`姓名:${this.name},学号:${this.number}`)  
  }
}

这样,我们一个简单的类就实现了,我们就可以使用类声明对象/实例

 const xiaokonglong=new Student('小恐龙',001)
console.log(xiaokonglong.name,xiaokonglong.number) // 小恐龙 001
xiaokonglong.sayHi() // 姓名:小恐龙,学号:001

这样,一个简单的类就已经完成了。

什么时候用继承?如何实现继承?

当有很多的class并且这些class中有很多公共属性的时候我们就可以使用继承。
实现继承我们会需要用到: extends super

比如一个学校有学生,老师,保安..等等,他们都有共同的属性,都在同一个学校,都同样是人,这个人的属性就可以作为一个基础的类供学生,老师,保安继承。

同样,举个栗子实现学生,老师,保安的类。
首先声明他们共同有的属性类,人:

  • 实现公共类
// 公共类
    class People {
      constructor(name, job) {
        this.name = name
        this.job = job
        this.school = '恐龙小学'
      }
      sayInfo() {
        console.log(`我是${this.school}的一名${this.job},我的名字是${this.name}`)
      }
    }

共同的属性,姓名 工作 学校都在People这个类中实现了,在实现学生/教师/保安时只需要继承就可以实现相应的类。

  • 实现学生类
    学生除了有姓名,工作,学校外还有学号。
   class Student extends People {
      constructor(name, job, number) {
        super(name, job) // 此处的super会调用继承的类(People)中的constructor
        this.number = number // 定义学生独有的学号属性
      }
      sayNumber() {
        console.log(`我是${this.name},我的学号是${this.number}`)
      }
    }
    let xiaoxiao = new Student("笑笑", "学生", 1001) // 实例化
    console.log(xiaoxiao.name, xiaoxiao.school) // 笑笑    恐龙小学
    xiaoxiao.sayInfo()  // 我是恐龙小学的一名学生,我的名字是笑笑
    xiaoxiao.sayNumber()  // 我是笑笑,我的学号是1001

可以看到,学生类通过extends继承了People中的属性和方法,并且能够成功调用。此处感兴趣的小伙伴可以打印一下他们的原型查看一下他们的关系(后续我会再次出原型链的文章)

  • 实现教师类
    教师没有学生的number所以我们不能继承学生类,但是教师和学生一样都有People中的属性,那么教师就可以继承People的类
  class Teacher extends People {
      constructor(name, job, type) {
        super(name, job) // 此处的super会调用继承的类(People)中的constructor
        this.type = type // 定义教师的教学类型
      }
      sayType() {
        console.log(`我是${this.name},我教学${this.type}这门课程`)
      }
    }
    let laoshi = new Teacher('王老师', '老师', 'Web前端')
    console.log(laoshi.name, laoshi.school) // 王老师 恐龙小学
    laoshi.sayInfo() // 我是恐龙小学的一名老师,我的名字是王老师
    laoshi.sayType() // 我是王老师,我教学Web前端这门课程

和学生类相同,教师类继承了Pepple的属性并且添加独有的属性。

  • 保安类与学生类和教师类相同的道理,就不在举例了。

继承而来的类能否再次继承呢?

答案肯定是必须的,还是举个栗子,在学生类中扩展年级。

    class Rank extends Student {
      constructor(name, job, number, rank) {
        super(name, job, number) // 此处的super会调用继承的类(Student)中的constructor,Student还会调用(people)中的constructor
        this.rank = rank // 独有属性级别
      }
      sayRank() {
        console.log(`我是继承了学生类的,我的级别是${this.rank}`)
      }
    }
    let four = new Rank('小李子', '学生', 2001, '四年级')
    console.log(four.name, four.school, four.number)
    // 小李子 恐龙小学 2001
    four.sayRank() // 我是继承了学生类的,我的级别是四年级

由例子可以看到,继承是可以延续的,只要保证结构是正确的就肯定没问题的。

以上就是一个简单的继承的例子,但是很好的说明了类的继承与实现。
喜欢的点点喜欢,后续还会写解密继承后原型的关系,喜欢的可以关注一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容