在2023年从头开始学习JavaScript继承和类

前端

2023-09-17 05:23:43

理解原型和原型链

在深入探索继承之前，我们必须先了解原型和原型链，它们是JavaScript中面向对象编程的基础。

原型是JavaScript中每个函数都自带的一个特殊对象，其中包含该函数创建的对象的共有属性和方法。通过原型，我们可以实现对象的复用，从而简化代码。

原型链是JavaScript中一个重要的概念，它将所有对象连接成一个链式结构。每个对象都有一个内部属性，指向其原型的引用。通过原型链，我们可以访问所有祖先对象属性和方法。

探索类和继承

类是ES6中引入的一个新特性，它提供了更加现代的方式来创建对象。类基于原型，允许我们使用更简洁的语法来定义对象的属性和方法，同时支持继承和多态。

继承是类的一个重要特性，它允许我们创建子类，子类可以继承父类的属性和方法。通过继承，我们可以复用代码，并创建出更加复杂的对象结构。

从头开始学习继承

1. 创建一个类

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

2. 创建一个子类

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  study() {
    console.log(`${this.name} is studying at ${this.school}.`);
  }
}

3. 使用继承

const person = new Person('John Doe', 30);
person.greet(); // Hello, my name is John Doe and I am 30 years old.

const student = new Student('Jane Doe', 20, 'Harvard University');
student.greet(); // Hello, my name is Jane Doe and I am 20 years old.
student.study(); // Jane Doe is studying at Harvard University.