ES6 语法糖 class —— 海绵宝宝的邀请函

前端

2024-02-16 18:44:54

海绵宝宝的邀请函

大家好，我是海绵宝宝！今天，我邀请大家一起来研究 ES6 的语法糖 class。

ES6 class 是一个非常强大的特性，它可以让我们用更简洁的代码来编写面向对象程序。在本文中，我们将学习如何使用 ES6 class 来创建对象、定义属性和方法，以及如何使用继承和多态性。

什么是 ES6 class？

ES6 class 是一种语法糖，它允许我们用更简洁的代码来编写面向对象程序。ES6 class 仍然是基于原型链实现的，但它让代码更加简洁，更易理解。

如何使用 ES6 class？

要使用 ES6 class，我们需要先定义一个类。类可以被看作是一个模板，它定义了对象拥有的属性和方法。

例如，我们可以定义一个名为 Person 的类，如下所示：

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.`);
  }
}

在上面的代码中，我们定义了一个名为 Person 的类。该类有两个属性：name 和 age。它还定义了一个名为 greet() 的方法，该方法可以打印出该人的姓名和年龄。

要创建 Person 类的实例，我们可以使用 new ，如下所示：

const person = new Person('SpongeBob', 13);

在上面的代码中，我们创建了一个名为 person 的 Person 类的实例。该实例有两个属性：name 和 age。我们可以使用点运算符来访问这些属性，如下所示：

console.log(person.name); // SpongeBob
console.log(person.age); // 13

我们也可以使用点运算符来调用 Person 类的实例的方法，如下所示：

person.greet(); // Hello, my name is SpongeBob and I am 13 years old.

继承和多态性

ES6 class 还支持继承和多态性。继承允许我们创建一个新的类，该类从另一个类继承属性和方法。多态性允许我们以不同的方式使用不同类型的对象。

例如，我们可以创建一个名为 Student 的类，该类从 Person 类继承属性和方法，如下所示：

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

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

在上面的代码中，我们定义了一个名为 Student 的类。该类继承了 Person 类的属性和方法。Student 类还定义了一个名为 study() 的方法，该方法可以打印出该学生正在学习的信息。

要创建 Student 类的实例，我们可以使用 new 关键字，如下所示：

const student = new Student('Patrick', 14, 'Bikini Bottom Elementary School');

在上面的代码中，我们创建了一个名为 student 的 Student 类的实例。该实例有两个属性：name 和 age。它还继承了 Person 类的 greet() 方法。我们可以使用点运算符来访问这些属性和方法，如下所示：

console.log(student.name); // Patrick
console.log(student.age); // 14
student.greet(); // Hello, my name is Patrick and I am 14 years old.
student.study(); // Patrick is studying.