再谈 JavaScript 类

2023-12-08 11:22:42

再谈 JavaScript 类

在 JavaScript 中，类是一个用来创建对象的蓝图。它定义了对象的属性和方法，并允许您使用这些属性和方法来创建对象。类可以被实例化，实例化后可以访问类中的属性和方法。

类的定义

类使用 class 来定义。类的语法如下：

class ClassName {
  // 类属性
  propertyName = value;

  // 类方法
  methodName() {
    // 方法体
  }
}

例如，我们可以定义一个 Person 类如下：

class Person {
  // 类属性
  name = 'John Doe';
  age = 30;

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

类的实例化

类的实例化使用 new 关键字。new 关键字创建一个新的对象，并调用类的构造函数。构造函数是类的特殊方法，它在对象创建时自动调用。构造函数的语法如下：

constructor() {
  // 构造函数体
}

例如，我们可以实例化 Person 类如下：

const person = new Person();

实例化后，我们可以访问类中的属性和方法。例如，我们可以调用 person.greet() 方法来输出 "Hello, my name is John Doe and I am 30 years old."。

类的继承

类可以继承其他类，继承允许您在新的类中重用其他类的属性和方法。继承使用 extends 关键字。extends 关键字指定新的类继承哪个类。例如，我们可以定义一个 Student 类继承 Person 类如下：

class Student extends Person {
  // 类属性
  studentId = '123456789';

  // 类方法
  study() {
    console.log('I am studying.');
  }
}

继承后，Student 类可以访问 Person 类的所有属性和方法，并且还可以定义自己的属性和方法。例如，我们可以调用 student.study() 方法来输出 "I am studying."。

类的使用

类在 JavaScript 中有着广泛的应用。类可以用于创建各种各样的对象，包括用户对象、产品对象、订单对象等等。类也可以用于创建组件，组件可以被复用，从而减少代码的重复。

示例 1

我们可以使用类来创建一个简单的用户注册表单。表单中有三个输入框，分别用于输入用户名、密码和电子邮件地址。当用户点击提交按钮时，表单会将输入的数据发送到服务器。

class UserRegistrationForm {
  constructor() {
    this.usernameInput = document.getElementById('username');
    this.passwordInput = document.getElementById('password');
    this.emailInput = document.getElementById('email');
    this.submitButton = document.getElementById('submit');

    this.submitButton.addEventListener('click', () => {
      const username = this.usernameInput.value;
      const password = this.passwordInput.value;
      const email = this.emailInput.value;

      // 将数据发送到服务器
    });
  }
}

const form = new UserRegistrationForm();

示例 2

我们可以使用类来创建一个简单的组件。组件是一个可以被复用的代码块。组件可以被添加到页面中，并且可以在页面中使用。

class MyComponent {
  constructor() {
    this.element = document.createElement('div');
    this.element.innerHTML = 'Hello, world!';
  }

  render() {
    document.body.appendChild(this.element);
  }
}

const component = new MyComponent();
component.render();