JavaScript 类

类是用于创建对象的模板。他们用代码封装数据以处理该数据。JS中的类建立在原型上，但也具有某些语法和语义未与ES5类相似语义共享。

在 JavaScript 中，实际上，类是“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

使用关键字class创建一个类。

始终添加名为constructor（）的方法：

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

实例

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

上面的例子创建了一个名为“Car”的类。

这个类有两个初始属性：“name” 和 “year”。

JavaScript类不是对象，它是JavaScript对象的模板。

JavaScript 使用类

当您有一个类时，可以使用该类来创建对象：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class</h2>
<p>如何使用 JavaScript 类</p>
<p id="demo"></p>
<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
myCar = new Car("福特", 2014);
document.getElementById("demo").innerHTML =
myCar.name + " " + myCar.year;
</script>
</body>
</html>

运行一下

上面的示例使用Car类创建两个Car对象。

提示：构造函数方法在创建新对象时自动调用。

构造函数方法

构造函数方法是一种特殊方法：

它必须有确切的名字“constructor”
它在创建新对象时自动执行
它用于初始化对象属性

如果不定义构造函数方法，JavaScript将添加一个空的构造函数方法。

类方法

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

使用关键字class创建一个类。

始终添加一个构造函数 constructor() 方法。

然后可以添加多个方法。

语法

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 类方法</h2>
<p>如何定义和使用类方法。</p>
<p id="demo"></p>
<script>
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("福特", 2014);
document.getElementById("demo").innerHTML =
"我的汽车已经 " + myCar.age() + " 岁了.";
</script>
</body>
</html>

运行一下

可以向类方法发送参数：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 类方法</h2>
<p>将参数传递给 age() 方法。</p>
<p id="demo"></p>
<script>
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("福特", 2014);
document.getElementById("demo").innerHTML=
"我的汽车已经 " + myCar.age(year) + " 岁了.";
</script>
</body>
</html>

运行一下

浏览器支持

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

目标
类	Chrome 49	IE / Edge 12	Firefox 45	Safari 9	Opera 36
	2016 年 3 月	2015 年 6 月	2016 年 3 月	2015 年 10 月	2016 年 3 月

JavaScript 类

JavaScript 使用类

构造函数方法

类方法

语法

浏览器支持

分类导航