React ES6 类

课程

ES6 引入了类。

类是一种函数类型，但不使用关键字function为了启动它，我们使用关键字class，并且属性被分配在一个内部constructor()方法。

示例

一个简单的类构造函数：

class Car {
  constructor(name) {
    this.brand = name;
  }
}

注意类名的大小写。我们以大写字符开始名称 "Car"。这是类的标准命名约定。

现在您可以使用 Car 类创建对象：

示例

基于 Car 类创建一个名为 "mycar" 的对象：

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

亲自试一试 »

笔记：构造函数在对象初始化时自动调用。

类中的方法

您可以在类中添加自己的方法：

示例

创建一个名为"present"的方法：

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

亲自试一试 »

正如您在上面的示例中所看到的，您可以通过引用对象的方法名称后跟括号来调用该方法（参数将放在括号内）。

类继承

要创建类继承，请使用extends关键字。

使用类继承创建的类会继承另一个类的所有方法：

示例

创建一个名为 "Model" 的类，它将继承 "Car" 类的方法：

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

亲自试一试 »

这个super()方法指的是父类。

通过致电super()在构造函数方法中，我们调用父级的构造函数并访问父级的属性和方法。

要了解有关课程的更多信息，请查看我们的JavaScript 类部分。