为什么出现类

JavaScript诞生之初并不是面向对象的语言，因此没有类的概念，在ES6之前我们可以用构造函数的方式来代替类
在ES6中为了使对象的表达更加清晰，向着面向对象编程更近一步，新增了类的用法，用 class 关键字声明，但其本质还是构造函数的语法糖

对于构造函数不太理解的小伙伴可以看看这篇文章 # 构造函数的“前世今生”——拒绝“八股文”

class实现构造函数

我们先来声明一个构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function () {
    console.log(`I am ${this.name}`);
}
const person = new Person('李雷', 35);
console.log(person); // {name: '李雷', age: 35} 

再来用 class 来实现上面的构造函数，同样是使用 new 命令来声明对象

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        console.log(`I am ${this.name}`);
    }
}
const person = new Person('韩梅梅', 25);
console.log(person); // {name: '韩梅梅', age: 25} 

上面的代码定义了一个 Person 类，通过 constructor 方法定义了这个类的属性 name 和 age，其中 constructor 是一个特殊的方法，用于构造和初始化对象。此外，Person 类还定义了一个 say 方法，用于输出个人信息

继承

Class 还支持继承，通过 extends 关键字可以创建一个子类，子类可以继承父类的属性和方法，同时也可以覆盖父类的属性和方法

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类的 constructor 方法
    this.grade = grade;
  }
  say() {
    console.log(`Hello, my name is ${this.name}, I'm a student of grade ${this.grade}.`);
  }
}

const student = new Student('Lucy', 16, '10');
student.sayHello(); // 输出 "Hello, my name is Lucy, I'm a student of grade 10."

上面的代码定义了一个 Student 子类，它继承了 Person 父类的属性和方法，并重写了 say 方法。通过 super 关键字可以调用父类的构造函数，确保子类对象正确初始化

总结

类是 JavaScript 中一种强大的对象模板语法，使得我们能够更好地组织代码，降低了代码的复杂度和重复性，提高了代码的可维护性。同时，它还支持继承，使得我们能够更方便地创建子类并对父类进行扩展。因此，在开发中使用类是非常值得推荐的一种方式。

我是前端霸哥，愿你的代码中没有bug
写的不好的地方，欢迎各位小伙伴批评指正