最适合网络开发者的网站
React 语言。W3Schools 英文版。初学者课程

尿素

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 类 部分。