React ES6 类和方法

Classes 类

ES6 引入了 classes（类）。

类是函数的一种类型，但不是使用关键字 function 来启动它，而是使用关键字 class，属性在 constructor() 构造函数方法中赋值。

实例

一个简单的类构造:

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

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

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

实例

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

<!DOCTYPE html>
<html>
<body>
<script>
class Car {
  constructor(name) {
    this.brand = name;
  }
}
const mycar = new Car("Ford");
document.write(mycar.brand);
</script>
</body>
</html>

运行一下

注意：初始化对象时会自动调用构造函数。

类中的方法

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

实例

创建一个名为 “present” 的方法:

<!DOCTYPE html>
<html>
<body>
<script>
class Car {
  constructor(name) {
    this.brand = name;
  }
  present() {
    return 'I have a ' + this.brand;
  }
}
const mycar = new Car("Ford");
document.write(mycar.present());
</script>
</body>
</html>

运行一下

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

类继承

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

使用类继承创建的类从另一个类继承所有方法:

实例

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

<!DOCTYPE html>
<html>
<body>
<script>
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");
document.write(mycar.show());
</script>
</body>
</html>

运行一下

super() 方法引用父类。

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

要了解有关 ES6 类的更多知识，请查看本站的 JavaScript 类部分。

React ES6 类和方法

Classes 类

实例

实例

类中的方法

实例

类继承

实例

分类导航