【温故而知新】JavaScript类、类继承、静态方法

前言

JavaScript是一种广泛使用的编程语言，主要用于Web开发。它是一种脚本语言，这意味着它不需要像编译语言那样预先编译，而是在运行时解释和执行。JavaScript可以直接在浏览器中运行，这使得它在前端开发中特别重要，可以用于动态生成和更改网页内容、响应用户交互、发送和接收数据等。

JavaScript的主要特点包括：

1. 动态类型：变量可以在运行时更改其数据类型。
2. 面向对象：JavaScript是一种面向对象的编程语言，支持类和继承。
3. 异步编程：JavaScript支持异步编程，这使得它可以处理如用户交互和网络请求等异步事件。
4. 浏览器兼容性：大多数现代浏览器都支持JavaScript。

一、类

JavaScript中的类（Class）是一种用于创建对象的蓝图。类定义了对象的属性和行为，可以实例化多个对象，并且对象之间可以共享类定义的属性和方法。下面是一个简单的JavaScript类的概念和案例代码：

类定义语法：

class ClassName {
  constructor(parameter1, parameter2, ...) {
    // 构造函数，用于初始化对象的属性
    this.property1 = parameter1;
    this.property2 = parameter2;
    // ...
  }

  method1() {
    // 方法1
    // 可以使用this关键字来访问对象的属性
  }

  method2() {
    // 方法2
  }

  //...
}

案例代码：

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

  sayHello() {
    console.log("Hello, my name is " + this.name);
  }

  getAge() {
    return this.age;
  }

  setAge(newAge) {
    this.age = newAge;
  }
}

// 创建一个Person对象
let person1 = new Person("John", 25);

// 调用对象的方法
person1.sayHello(); // 输出 "Hello, my name is John"

// 访问对象的属性
console.log(person1.name); // 输出 "John"

// 调用对象的方法
console.log(person1.getAge()); // 输出 25

// 修改对象的属性
person1.setAge(30);
console.log(person1.getAge()); // 输出 30

注意：JavaScript中的类是引用类型。因此，如果将一个对象赋值给另一个变量，实际上只是将对象的引用赋值给了新的变量，而不是创建了一个新的对象。修改其中一个对象的属性，会影响到其他引用该对象的变量。

二、类继承

JavaScript中的类继承是一种允许一个类继承另一个类的属性和方法的机制。子类继承了父类的所有属性和方法，并且可以在子类中添加新的属性和方法或对父类的方法进行重写。下面是一个简单的JavaScript类继承的概念和案例代码：

类继承语法：

class ChildClass extends ParentClass {
  constructor(parameter1, parameter2, ...) {
    super(parameter1, parameter2, ...);
    // 子类必须在constructor中调用super()方法来调用父类的构造函数
    // 这样子类才能继承父类的属性和方法
    // 可以在constructor中初始化子类独有的属性
  }

  // 子类可以添加自己的方法
  childMethod() {
    // ...
  }

  // 子类可以重写父类的方法
  parentMethod() {
    super.parentMethod(); // 使用super调用父类的方法
    // ...
  }

  // ...
}

案例代码：

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(this.name + " is eating.");
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(this.name + " is barking.");
  }
}

// 创建一个Dog对象
let dog1 = new Dog("Max", "Labrador");

// 调用父类的方法
dog1.eat(); // 输出 "Max is eating."

// 调用子类自己的方法
dog1.bark(); // 输出 "Max is barking."

// 子类继承了父类的属性
console.log(dog1.name); // 输出 "Max"

// 子类可以添加自己的属性
console.log(dog1.breed); // 输出 "Labrador"

在上面的例子中，Dog类继承了Animal类的属性和方法。Dog类通过调用super(name)来调用父类的构造函数，以便继承父类的name属性。Dog类还添加了自己的属性breed和方法bark。通过创建Dog对象，我们可以调用父类的eat方法和子类的bark方法，并访问到继承的属性name和新增的属性breed。

三、静态方法

JavaScript静态方法是定义在类本身上而不是实例上的方法。静态方法可以直接通过类调用，而不需要创建类的实例。静态方法通常用于执行与类相关的操作或实现工具函数，而不是对类的实例进行操作。下面是一个简单的JavaScript静态方法的概念和案例代码：

静态方法语法：

class ClassName {
  static staticMethod(parameter1, parameter2, ...) {
    // 执行静态方法的代码
  }
}

// 调用静态方法
ClassName.staticMethod(parameter1, parameter2, ...);

案例代码：

class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

// 调用静态方法
let result1 = MathUtils.add(5, 3); // 8
let result2 = MathUtils.subtract(5, 3); // 2
console.log(result1);
console.log(result2);

在上面的例子中，MathUtils类定义了两个静态方法add和subtract。可以直接通过类名调用这些静态方法，而不需要创建MathUtils类的实例。调用静态方法时，参数被传递给方法，并且该方法返回一个结果。在这个例子中，我们通过调用MathUtils类的add和subtract方法，将两个数相加和相减，并将结果打印到控制台上。

需要注意的是，静态方法不能访问实例的属性或方法，因为它们不是类的实例方法，而是与类本身相关的方法。静态方法通常用于执行一些与类相关的操作，而不是操作实例。

四、热门文章

【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环