【JS面试题】如何用class实现继承？_class类继承面试题

1.class

Class是面向对象的语法的一个实现。Class本质上类似一个模板，通过模板去构建一些东西。可以通过constructor去构建一些东西，构建的时候可以复制一些属性，一些方法。比如我们构建一个学生在这个模板，这个模板呢，可以传入名称、学号等属性，方法看随便写。

核心代码演示：
初始化：

//类 开头大写
class Student {
    //构造器构造属性
    constructor(name,number) {
        //this代表当前你正在构造的实例
        this.name = name;
        this.number = number;
        // this.gender = 'male'
    }
    //方法
    sayHi() {
        console.log(`姓名 ${this.name}, 学号 ${this.number}`)
        // console.log('姓名 ' + this.name + ' , 学号' + this.number)
    }
    // study(){

    // }
}

//通过类 new 对象/实例   
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name);
console.log(xialuo.number);
xialuo.sayHi();

const madongmei = new Student('马冬梅', 101)
console.log(madongmei.name);
console.log(madongmei.number);
madongmei.sayHi();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

结果：

夏洛
100
姓名 夏洛, 学号 100
马冬梅
101
姓名 马冬梅, 学号 101
1
2
3
4
5
6

2.继承

什么是继承呢？当我们有很多个class,这些class有一些共用的属性的时候，就可以抽离出来。比如说我们刚才声明的class Student(),还可以声明老师，老师和学生有一些共同点，比如都是人，人都会吃饭，学生可以学习、打招呼，老师可以教课。

1. 通过extends去做的
2. 里面通过super来执行父类的构造函数，也就是父类的构建过程。
3. 扩展或重写的方法

核心代码演示：

//父类
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat something`)
    }
}

//子类 继承父类 里面的方法可以直接调用，属性需要调用super去执行
class Student extends People {
    constructor(name,number) {
        //调用super,People会自动帮我们处理name
        super(name)
        //自己处理，学生才有自己的学号
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
    }
}

//子类
class Teacher extends People {
    constructor(name,major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`${this.name} 教授 ${this.major}`)
    }
}

//实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name);
console.log(xialuo.number);
xialuo.sayHi();
xialuo.eat();

//实例
const wanglaoshi = new Teacher('王老师','语文')
console.log(wanglaoshi.name);
console.log(wanglaoshi.major);
wanglaoshi.teach();
wanglaoshi.eat();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

结果：

夏洛
100
姓名 夏洛 学号 100
夏洛 eat something
王老师
语文
王老师 教授 语文
王老师 eat something
1
2
3
4
5
6
7
8