JavaScript 什么是Class

在JavaScript中，Class是一种特殊的函数。而函数又是JavaScript中的一等公民，因此我们可以通过函数来创建Class。Class提供了一种面向对象编程的方式，允许我们定义对象的属性和方法，并通过实例化来使用这些属性和方法。

在ES6之前，JavaScript并没有原生支持Class的语法，而是通过构造函数来实现类似的功能。ES6引入了Class的语法糖，使得创建和使用Class更加简洁和直观。

Class的基本语法

Class的基本语法如下：

class MyClass {
  constructor() {
    // 构造函数，用于初始化实例属性
  }

  method1() {
    // 实例方法
  }

  static method2() {
    // 静态方法
  }
}

class关键字用于声明一个Class。
constructor方法是Class的构造函数，用于初始化实例属性。它在实例化时自动调用。
method1是一个实例方法，它可以通过实例对象调用。
method2是一个静态方法，它可以直接通过Class调用，不需要实例化。

实例化Class

要使用一个Class，我们需要先实例化它。实例化一个Class的过程就是创建一个该Class的对象实例。通过new关键字，我们可以创建一个Class的实例。

class MyClass {
  constructor() {
    this.name = 'John';
  }

  sayHello() {
    console.log('Hello, ' + this.name + '!');
  }
}

const instance = new MyClass();
instance.sayHello(); // 输出：Hello, John!

在这个例子中，我们创建了一个名为MyClass的Class。在constructor中，我们给实例对象设置了一个属性name。然后，我们通过new关键字创建了一个MyClass的实例instance，并调用了sayHello()方法。

Class的继承

Class支持继承，我们可以使用extends关键字来创建一个Class的子类。

class ParentClass {
  constructor() {
    this.name = 'John';
  }

  sayHello() {
    console.log('Hello, ' + this.name + '!');
  }
}

class ChildClass extends ParentClass {
  sayBye() {
    console.log('Bye, ' + this.name + '!');
  }
}

const child = new ChildClass();
child.sayHello(); // 输出：Hello, John!
child.sayBye(); // 输出：Bye, John!

在这个例子中，我们创建了一个父类ParentClass和一个子类ChildClass。子类通过extends关键字继承了父类的属性和方法。通过实例化子类，我们可以使用父类和子类的方法。

获取Class

JavaScript提供了一些方法来获取Class。我们可以根据Class的名称来获取Class对象。

1. document.getElementsByClassName()

document.getElementsByClassName()方法可以根据指定的类名获取DOM中所有具有该类名的元素。

// HTML
// <div class="my-class">Item 1</div>
// <div class="my-class">Item 2</div>
// <div class="my-class">Item 3</div>

const elements = document.getElementsByClassName('my-class');
console.log(elements); // 输出: HTMLCollection(3) [div.my-class, div.my-class, div.my-class]

在这个例子中，我们通过getElementsByClassName方法传入类名'my-class'来获取所有具有该类名的元素。结果是一个HTMLCollection，它是一个类似数组的对象，包含了所有匹配的元素。

2. document.querySelector()

document.querySelector()方法可以根据指定的选择器获取DOM中第一个匹配的元素。

// HTML
// <div class="my-class">Item 1</div>
// <div class="my-class">Item 2</div>
// <div class="my-class">Item 3</div>

const element = document.querySelector('.my-class');
console.log(element); // 输出: div.my-class

在这个例子中，我们通过querySelector方法传入选择器.my-class来获取第一个匹配的元素。结果是一个Element对象。

3. document.querySelectorAll()

document.querySelectorAll()方法类似于document.querySelector()，但是它返回匹配选择器的所有元素。

// HTML
// <div class="my-class">Item 1</div>
// <div class="my-class">Item 2</div>
// <div class="my-class">Item 3</div>

const elements = document.querySelectorAll('.my-class');
console.log(elements); // 输出: NodeList(3) [div.my-class, div.my-class, div.my-class]