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() // 我是继承了学生类的,我的级别是四年级

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

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