JavaScript类继承知识点大全
面向编程小白的详细解释，用简单语言理解JavaScript类继承的核心概念
①
类的基础概念
类是什么？ 类就像是创建对象的蓝图或模板，它定义了对象应该具有的属性和方法。
创建类的基本语法
使用 class 关键字来定义类：
// 定义一个Person类
class Person {
// 构造函数 – 创建对象时自动调用
constructor(name, age) {
this.name = name;
this.age = age;
}
// 类的方法
sayHello() {
console.log(`大家好，我是${this.name}，今年${this.age}岁！`);
}
}
class Person {
// 构造函数 – 创建对象时自动调用
constructor(name, age) {
this.name = name;
this.age = age;
}
// 类的方法
sayHello() {
console.log(`大家好，我是${this.name}，今年${this.age}岁！`);
}
}
使用方法：
const person1 = new Person(‘张三’, 25);
person1.sayHello(); // 输出：大家好，我是张三，今年25岁！
const person1 = new Person(‘张三’, 25);
person1.sayHello(); // 输出：大家好，我是张三，今年25岁！
注意： 类声明不会被提升（hoisting），必须先声明类，然后再使用它。
②
类的继承（extends）
继承是什么？ 继承就像孩子继承父母的基因。在JS中，一个类（子类）可以继承另一个类（父类）的属性和方法。
实现继承的基本语法
使用 extends 关键字让一个类继承另一个类：
// 创建一个Student类，继承自Person类
class Student extends Person {
constructor(name, age, grade) {
super(name, age); // 调用父类的构造函数
this.grade = grade; // 添加子类特有的属性
}
// 子类特有的方法
study() {
console.log(`${this.name}正在努力学习，读${this.grade}年级。`);
}
}
class Student extends Person {
constructor(name, age, grade) {
super(name, age); // 调用父类的构造函数
this.grade = grade; // 添加子类特有的属性
}
// 子类特有的方法
study() {
console.log(`${this.name}正在努力学习，读${this.grade}年级。`);
}
}
使用方法：
const student1 = new Student(‘李四’, 16, ‘高一’);
student1.sayHello(); // 继承自父类的方法
student1.study(); // 子类自己的方法
const student1 = new Student(‘李四’, 16, ‘高一’);
student1.sayHello(); // 继承自父类的方法
student1.study(); // 子类自己的方法
重要规则： 如果在子类中定义了构造函数，必须在构造函数中首先调用
super()，然后才能使用 this 关键字。
③
super关键字的用法
super是什么？
super 关键字用于访问父类上的函数，就像是在说”调用我爸爸的方法”。
super的两种使用方式
1. 作为函数调用： 在子类构造函数中调用父类构造函数
constructor(name, age, grade) {
super(name, age); // 调用父类构造函数
this.grade = grade;
}
super(name, age); // 调用父类构造函数
this.grade = grade;
}
2. 作为对象使用： 在子类方法中调用父类的方法
// 重写父类方法，但仍然想使用父类原来的功能
sayHello() {
super.sayHello(); // 先调用父类的sayHello方法
console.log(`我是一名${this.grade}的学生！`);
}
sayHello() {
super.sayHello(); // 先调用父类的sayHello方法
console.log(`我是一名${this.grade}的学生！`);
}
使用场景：
当你想在子类中扩展父类的方法而不是完全替换时，可以使用super调用父类方法，然后添加新功能。
当你想在子类中扩展父类的方法而不是完全替换时，可以使用super调用父类方法，然后添加新功能。
④
方法重写（Override）
方法重写是什么？ 当子类定义了与父类同名的方法时，子类的方法会”覆盖”父类的方法，就像孩子有自己的想法，不按照父母的习惯做事。
方法重写示例
class Teacher extends Person {
constructor(name, age, subject) {
super(name, age);
this.subject = subject;
}
// 重写父类的sayHello方法
sayHello() {
console.log(`各位同学好，我是${this.name}老师，教${this.subject}科目。`);
}
}
constructor(name, age, subject) {
super(name, age);
this.subject = subject;
}
// 重写父类的sayHello方法
sayHello() {
console.log(`各位同学好，我是${this.name}老师，教${this.subject}科目。`);
}
}
使用方法：
const teacher1 = new Teacher(‘王老师’, 35, ‘数学’);
teacher1.sayHello(); // 输出自定义的内容，而不是父类的sayHello
const teacher1 = new Teacher(‘王老师’, 35, ‘数学’);
teacher1.sayHello(); // 输出自定义的内容，而不是父类的sayHello
注意： 方法重写是完全替换父类的方法。如果你想在保留父类功能基础上添加新功能，应该使用
super 来调用父类方法。
⑤
静态方法（Static Methods）
静态方法是什么？ 静态方法是属于类本身的方法，而不是类的实例。就像公司里的规章制度，属于公司本身，而不是任何一个员工。
定义和使用静态方法
class MathUtils {
// 静态方法
static add(a, b) {
return a + b;
}
// 静态方法也可以访问其他静态方法
static addThree(a, b, c) {
return this.add(a, b) + c;
}
}
// 静态方法
static add(a, b) {
return a + b;
}
// 静态方法也可以访问其他静态方法
static addThree(a, b, c) {
return this.add(a, b) + c;
}
}
使用方法：
console.log(MathUtils.add(5, 3)); // 8
console.log(MathUtils.addThree(1, 2, 3)); // 6
// 注意：不能通过类的实例调用静态方法
const util = new MathUtils();
util.add(1, 2); // TypeError: util.add is not a function
console.log(MathUtils.add(5, 3)); // 8
console.log(MathUtils.addThree(1, 2, 3)); // 6
// 注意：不能通过类的实例调用静态方法
const util = new MathUtils();
util.add(1, 2); // TypeError: util.add is not a function
继承中的静态方法： 子类可以继承父类的静态方法，也可以通过重写覆盖父类的静态方法。
⑥
原型链（Prototype Chain）
原型链是什么？ JavaScript中实现继承的底层机制。当访问一个对象的属性时，如果对象本身没有，就会去它的原型（prototype）上找，如果还没有，继续去原型的原型上找，直到找到或到达原型链末端。
类继承与原型链的关系
- 每个类都有一个
prototype属性 - 实例的
__proto__指向其类的prototype - 子类的
prototype的__proto__指向父类的prototype
验证原型链：
console.log(Student.prototype instanceof Person); // true
console.log(student1 instanceof Student); // true
console.log(student1 instanceof Person); // true
console.log(student1 instanceof Object); // true
console.log(Student.prototype instanceof Person); // true
console.log(student1 instanceof Student); // true
console.log(student1 instanceof Person); // true
console.log(student1 instanceof Object); // true
重要概念： 虽然现在使用类语法更简单，但理解原型链有助于深入理解JavaScript的继承机制。
JavaScript继承关系图解
父类（超类）
例如：Person类
包含通用属性和方法
包含通用属性和方法
子类
例如：Student类
使用extends继承父类
可以添加新属性和方法
可以重写父类方法
使用extends继承父类
可以添加新属性和方法
可以重写父类方法
实例
例如：student1对象
使用new关键字创建
可以调用类定义的方法
拥有自己的属性值
使用new关键字创建
可以调用类定义的方法
拥有自己的属性值