【JavaScript_3】js(ES6)中继承的实现——类继承

ES6中的继承，除了采用ES5中的六种方式外，还新增了通过类（class）来实现继承。

1.ES6中的class

class是ES6中新引入的关键字，可以用来定义一个类。

1.1 定义类的两种方式

// 1.类声明
class Person {}

// 2.类表达式
const Person = class {};

1.2 类构造器

在定义一个class时，constructor关键字用来定义创建class时要使用的构造函数。

class Person {
	constructor(name) {
		this.name = name;
		console.log("I'm constructor.");
	}
}

1.3 子类继承父类

用extends关键字实现继承，在子类中通过**super()**调用父类的构造函数。

// 定义父类
class SuperClass {
	constructor() {
		this.name = "Super.";
	}
}
// 定义子类，并继承以上父类
class SubClass extends SuperClass {
	constructor() {
		// 在构造器中，直接用super()来调用父类的构造器
		super();
	}
}

2. 一个例子

当前有两个类：学生类和教师类，它们有一个共同属性name，有各自不同的属性score or subject，有各自不同的方法getScore or getIntroduce

// 定义学生类
class Student {
	// constructor中定义属性
	constructor(name, score) {
		this.name = name;
		this.score = score;
	}
	// constructor之外定义类的方法
	getScore() {
		console.log(`我是${this.name}，我考了${this.score}分`)
	}
}

// 定义教师类
class Teacher {
	constructor(name, subject) {
		this.name = name;
		this.subject = subject;
	}
	getIntroduce() {
		console.log(`我是${this.name}，我教${this.subject}`);
	}
}

const student = new Student("小明", 99);
const teacher = new Teacher("杨老师", "英语");
student.getScore();      // 输出：我是小明，我考了99分
teacher.getIntroduce();  // 输出：我是杨老师，我教英语

上述Student class和Teacher class有一个共同属性name，可以考虑写一个父类，父类中具有name属性，然后让Student和Teacher class继承这个父类。调整完的代码如下：

// 定义父类
class Person {
    constructor(name) {
        this.name = name;
    }
    // 这里也可以定义一些方法，这些方法也会被子类继承
    someMethod() {
        console.log("yyk hhh");
    }
}

// 定义学生类，并继承Person
class Student extends Person {
    // constructor中定义属性
    constructor(name, score) {
        super(name);
        this.score = score;
    }
    // constructor之外定义类的方法
    getScore() {
        console.log(`我是${this.name}. 我考了${this.score}分.`)
    }
}

// 定义教师类，并继承Person
class Teacher extends Person {
    constructor(name, subject) {
        super(name);
        this.subject = subject;
    }
    getIntroduce() {
        console.log(`我是${this.name}. 我教${this.subject}.`);
    }
}

const student = new Student("小明", 99);
const teacher = new Teacher("杨老师", "英语");
student.getScore();      // 输出：我是小明，我考了99分
teacher.getIntroduce();  // 输出：我是杨老师，我教英语
teacher.someMethod();    // 输出：yyk hhh