【JS面试题】如何用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();

结果:

夏洛
100
姓名 夏洛, 学号 100
马冬梅
101
姓名 马冬梅, 学号 101

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();

结果:

夏洛
100
姓名 夏洛 学号 100
夏洛 eat something
王老师
语文
王老师 教授 语文
王老师 eat something

猜你喜欢

转载自blog.csdn.net/weixin_43352901/article/details/107428273