JavaScript 类

JavaScript 类是 JavaScript 对象的模板，使用 class 关键字表示。类是一种特殊的构造函数，是对构造函数的一种语法糖。

ECMAScript 2015，也称为 ES6，引入了类 class。

JavaScript 类语法

使用关键字 class 声明一个类。类可以包含：

一个构造方法：constructor()
其他自定义的方法
其他自定义的属性

语法：

class ClassName {
  constructor() { ... }
}

创建一个 Car 类

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

上面的示例创建了一个名为 Car 的类，该类有两个初始属性：name 和 year。

JavaScript 类不是对象。类是对象的模板，对象是类的实例，一个类可以创建任意多个对象。

创建两个类实例：

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

上面的例子使用 Car 类创建了两个对象，每个对象拥有自己的属性值。

构造方法

创建新对象时会自动调用构造方法，如果没有定义构造方法，JavaScript 会添加一个空的构造方法。

构造方法是一种特殊的方法：

它的名字必须是 constructor
创建新对象时自动执行
用于初始化对象属性或执行一些初始化操作

类方法

类方法的创建语法与对象方法相同。

使用关键字 class 创建一个类，添加一个 constructor() 方法，然后添加任意数量的方法。

创建一个名为 age 的类方法，它返回汽车年龄：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "我的汽车 " + myCar.age() + " 岁啦。";

您可以向类方法传递参数：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "我的汽车 " + myCar.age(year) + " 岁啦。";

类继承

通过继承类可以扩展一个现有的类，要实现建类继承，使用 extends 关键字。

下面例子首先创建一个 Car 类表示汽车，再创建一个 Model 类表示某一个型号的汽车：

class Car {
  constructor(brand) {
    this.brand = brand;
  }
  present() {
    return "我有一辆 " + this.brand + " 汽车";
  }
}

class Model extends Car {
  constructor(brand, model) {
    super(brand);
    this.model = model;
  }
  show() {
    return this.present() + ", 它的型号是： " + this.model;
  }
}

let myCar = new Model("福特", "野马");
document.getElementById("demo").innerHTML = myCar.show();

super() 方法调用父类的构造函数。

继承是代码可重用的一种方式，可以阔扩展现有类，重用现有类的属性和方法。

静态方法

静态方法是定义在类本身上的方法，只能通过类进行调用，不能通过对象调用。

通过 static 关键字声明静态方法，通过类名调用静态方法。

class Car {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}

let myCar = new Car("Ford");

// 通过类名调用静态方法
document.getElementById("demo").innerHTML = Car.hello();

// 不能通过对象调用静态方法，会引发错误
// document.getElementById("demo").innerHTML = myCar.hello();

浏览器支持

下表定义了第一个完全支持 JavaScript 类的浏览器版本：

Chrome	Edge	Firefox	Safari	Opera
Chrome 49	Edge 12	Firefox 45	Safari 9	Opera 36
2016-03	2015-07	2016-03	2015-10	2016-03

在本教程的后面，您将学到更多关于 JavaScript 类的知识。

JavaScript 类

JavaScript 类语法

构造方法

类方法

类继承

静态方法

浏览器支持

目录