JavaScript 中 class 如何调用

在JavaScript中，类（class）实例可以通过使用 new 关键字来创建，而方法和属性则可以通过实例直接调用或通过类名调用静态方法。一个类可以定义构造函数（constructor），实例方法、静态方法和属性。构造函数在新建实例时被自动调用，实例方法可以被任何类实例调用，而静态方法则不需要实例化，可以直接通过类来调用。

类的构造函数用于初始化新对象的状态。实例方法通常会操作或返回对象的信息，而静态方法则与类本身相关，而非类的某个特定实例。为了进一步了解这些概念，我们将探讨JavaScript中类的定义和调用方式。

一、定义类和构造函数

JavaScript 使用 class 关键字来定义一个类。类定义中的 constructor 方法用于创建和初始化类创建的一个对象。

class Car {

  constructor(brand) {
    this.brand = brand;
  }
}
let myCar = new Car("Toyota");

在上面的代码中，Car 类具有一个构造函数，它接受品牌名称作为参数并将其存储在实例属性 brand 上。使用 new 关键字创建 Car 类的实例时，constructor 被调用。

二、实例方法的使用

实例方法是定义在类的 prototype 对象上的，它可以被类的实例调用。

class Car {

  constructor(brand) {
    this.brand = brand;
  }
  displayBrand() {
    console.log("This car is a " + this.brand);
  }
}
let myCar = new Car("Toyota");
myCar.displayBrand(); // This car is a Toyota

在此例中，displayBrand 是 Car 类的一个实例方法，它输出所创建车辆的品牌。

三、静态方法的创建与调用

静态方法使用 static 关键字声明，不需要在类的实例上调用，而是直接在类上调用。

class Car {

  constructor(brand) {
    this.brand = brand;
  }
  static getCompanyName() {
    console.log("This car is made by Toyota Company");
  }
}
Car.getCompanyName(); // This car is made by Toyota Company

在这里，getCompanyName 是一个静态方法，它不依赖于类的任何实例，直接通过类名 Car 来调用。

四、继承和方法覆写

JavaScript 中的类也支持继承，允许派生类继承基类的方法和属性。

class Car {

  constructor(brand) {
    this.brand = brand;
  }
  displayBrand() {
    console.log("This car is a " + this.brand);
  }
}
class ElectricCar extends Car {
  displayBrand() {
    console.log("This electric car is a " + this.brand);
  }
}
let myElectricCar = new ElectricCar("Tesla");
myElectricCar.displayBrand(); // This electric car is a Tesla

上述代码中，ElectricCar 类继承自 Car 类，并覆写了 displayBrand 方法。

五、类的属性和访问器

ES6 类的属性可以直接在构造函数中通过 this 关键字来定义，同时也支持 getter 和 setter 访问器。

class Car {

  constructor(brand) {
    this._brand = brand;
  }
  get brand() {
    return this._brand;
  }
  set brand(newBrand) {
    this._brand = newBrand;
  }
}
let myCar = new Car("Toyota");
console.log(myCar.brand); // Toyota
myCar.brand = "Honda";
console.log(myCar.brand); // Honda

在上面的例子中，我们通过访问器 get 和 set 来对内部属性 _brand 进行安全的读取和修改。

JavaScript 类的使用非常灵活和强大，可以帮助开发者建立结构化和面向对象的代码，但要注意的是，虽然类语法使得结构更清晰，JavaScript 依旧是基于原型的，类实质上是构造函数和原型继承的语法糖。通过了解如何创建和调用类，你现在可以开始使用JavaScript中的面向对象编程技术，在代码中实现更高级的设计模式了。

相关问答FAQs：

1. JavaScript 中 class 是如何调用的?
在JavaScript中，class可以通过创建一个类的实例来调用。通过使用关键字new来实例化一个类，然后可以通过这个实例来调用类的方法和属性。

2. 如何在 JavaScript 中使用类的方法和属性？
要使用类的方法和属性，首先需要实例化该类，然后通过实例来访问类的方法和属性。可以使用点运算符（.）来访问实例的属性和方法。

例如，假设我们有一个名为Person的类，该类有一个名为name的属性和一个名为sayHello的方法。要访问Person类的方法和属性，可以按照以下方式操作：

// 创建一个Person类的实例
const person = new Person();

// 访问name属性
console.log(person.name);

// 调用sayHello方法
person.sayHello();

3. JavaScript 中如何调用类的静态方法？
在JavaScript中，类的静态方法是属于类本身的方法，而不是类的实例。因此，在调用类的静态方法时，不需要创建类的实例。可以直接使用类的名称，后跟点运算符（.），然后是静态方法的名称来调用静态方法。

例如，如果我们有一个名为MathUtils的类，其中有一个名为sum的静态方法，我们可以像这样调用它：

MathUtils.sum(1, 2); // 调用MathUtils类的sum方法并计算结果