JavaScript 类

vicky.yu

ECMAScript 2015，也称 ES6，引入了 JavaScript 类。

JavaScript 类是 JavaScript 对象的模板。

JavaScript 类的
语法
请使用关键字 class 创建类。

请始终添加名为 constructor() 的方法：

语法
class ClassName {
  constructor() { ... }
}
实例
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
上面的例子创建了一个名为 "Car" 的类。

该类有两个初始属性："name" 和 "year"。

JavaScript 类不是对象。

它只是 JavaScript 对象的模板。

使用类
如果您有一个类，那么您可以使用该类来创建对象：

实例
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
亲自试一试
上面的例子使用 Car 类创建了两个 Car 对象。

在创建新对象时会自动调用 constructor 方法。

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

它必须拥有确切名称的“构造函数”
创建新对象时自动执行
用于初始化对象属性
如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。
Class 方法
类方法的创建

语法
与对象方法相同。
请使用关键字 class 创建类。

请始终添加 constructor() 方法。

然后添加任意数量的方法。

语法
class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}
创建名为 "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 = "My car is " + myCar.age() + " years old.";
亲自试一试
您可以向类方法发送参数：

实例
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 = "My car is " + myCar.age(year) + " years old.";
亲自试一试
浏览器支持
下表注明了首个完全支持 JavaScript 类的浏览器版本：

Chrome        IE        Firefox        Safari        Opera
Chrome 49        Edge 12        Firefox 45        Safari 9        Opera 36
2016 年 3 月        2015 年 7 月        2016 年 3 月        2015 年 10 月        2016 年 3 月
在本教程的后面，您将学到更多关于 JavaScript 类的知识。

JS 箭头函数
JS 模块

JavaScript 和 HTML DOM 参考手册
JavaScript 实例
JavaScript 测验
JavaScript 高级教程

W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性