从0开始学前端 第二十五课：JavaScript中的类（Class）基础概念

第二十五课：JavaScript中的类（Class）基础概念

学习目标

本课程旨在帮助前端开发初学者了解和掌握JavaScript中类（Class）的相关概念。我们将学习以下内容：

1. 类的定义及其语法结构
2. 如何创建和使用类的实例
3. 类的构造函数的作用
4. 静态成员的定义与使用
5. 类的继承及如何通过extends和super关键字使用继承

学习内容

1. 类的定义

   类（Class）是JavaScript的一个高级语法，用于创建对象和实现对象的继承。在ES6之前，JavaScript使用函数和原型链来模拟类的行为。但现在，class关键字提供了一种更清晰、更直观的方式来创建对象的蓝图。

   语法结构：

   class MyClass {
       // 类的构造方法
       constructor() {
           // ...
       }
   
       // 类的方法
       myMethod() {
           // ...
       }
   }
   

2. 创建和使用类的实例

   类的实例是通过new关键字创建的，它会调用类的构造方法（constructor）来创建一个新对象。

   代码示例：

   class Car {
       constructor(brand) {
           this.brand = brand;
       }
   
       present() {
           return 'I have a ' + this.brand;
       }
   }
   
   let myCar = new Car("Ford");
   console.log(myCar.present());  // 预计输出："I have a Ford"
   

   在这个例子中，我们定义了一个Car类，它有一个构造函数和一个present方法。我们创建了一个Car的实例，并打印出了这辆车的品牌。

3. 构造函数

   构造函数是一个特殊的方法，它在创建类的新实例时自动被调用。构造函数通常用于初始化实例属性或执行设置对象所需的步骤。

   代码示例：

   class Car {
       constructor(brand) {
           this.brand = brand;
       }
   }
   
   let myCar = new Car("Ford");
   console.log(myCar.brand);  // 预计输出："Ford"
   

   当我们使用new Car("Ford")时，Car类的构造函数被调用，并将字符串"Ford"设置为这个新对象的品牌。

4. 静态成员

   静态成员是类的属性或方法，不属于类的任何单个实例，而是属于类本身。静态成员通过static关键字来定义。

   代码示例：

   class Car {
       static numberOfCars = 0;  // 静态属性
   
       constructor(brand) {
           this.brand = brand;
           Car.numberOfCars += 1;  // 通过类名来访问静态属性
       }
   
       static howManyCars() {
           return numberOfCars;  // 静态方法
       }
   }
   
   let myFirstCar = new Car("Toyota");
   let mySecondCar = new Car("Ford");
   console.log(Car.howManyCars());  // 预计输出：2
   

   在这个例子中，我们增加了一个静态属性来跟踪创建了多少Car实例，并通过一个静态方法来获取这个值。

5. 类的继承

   继承是面向对象编程中的一个核心概念。在JavaScript中，通过extends关键字，一个类可以继承另一个类的属性和方法。

   代码示例：

   class Car {
       constructor(brand) {
           this.brand = brand;
       }
       present() {
           return 'I have a ' + this.brand;
       }
   }
   
   class Model extends Car {
       constructor(brand, mod) {
           super(brand);  // 调用父类的constructor
           this.model = mod;
       }
       show() {
           return this.present() + ', it is a ' + this.model;
       }
   }
   
   let myCar = new Model("Ford", "Mustang");
   console.log(myCar.show());  // 预计输出："I have a Ford, it is a Mustang"
   

   在这个例子中，Model继承了Car，并添加了一个新的属性和方法。super关键字用来调用父类的构造函数。

课后练习

1. 创建一个Circle类，它接收半径作为参数，并能计算面积和周长。

   class Circle {
       constructor(radius) {
           this.radius = radius;
       }
       area() {
           return Math.PI * this.radius * this.radius;
       }
       perimeter() {
           return 2 * Math.PI * this.radius;
       }
   }
   
   // 练习代码
   let myCircle = new Circle(3);
   console.log(myCircle.area());      // 预计输出：约28.27
   console.log(myCircle.perimeter()); // 预计输出：约18.85
   

2. 创建一个Battery类和Smartphone类，让Smartphone继承自Battery类，并添加方法来检查电量。

   class Battery {
       constructor(charge) {
           this.charge = charge;  // 表示电量的百分比
       }
   }
   
   class Smartphone extends Battery {
       constructor(charge, brand) {
           super(charge);
           this.brand = brand;
       }
       checkCharge() {
           return this.brand + " battery charge is " + this.charge + "%";
       }
   }
   
   // 练习代码
   let myPhone = new Smartphone(85, "Samsung");
   console.log(myPhone.checkCharge());  // 预计输出："Samsung battery charge is 85%"
   

通过完成这些课后练习，你将能够巩固你对JavaScript类的理解，包括类的定义、实例化、静态成员的使用、构造函数的作用，以及如何使用继承和super。

---

章节目录
第二十六课：JavaScript中的类（Class）高级话题