在 ECMAScript 2015 （ES6） 中，JavaScript 增加了新的语法糖来支持面向对象编程，引入了类（Class）这个概念。ES6 中的类改进了原有的构造函数，并且提供了更加方便易用的语法糖。在 ECMAScript 2017 （ES8） 中，类得到了进一步的改进，我们将在本文中深入探讨这些改进和新特性。
类的定义
ES6 的类可以通过 class 关键字进行定义，例如：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}在这个例子中，我们定义了一个 Animal 类，它有一个构造函数和一个 speak() 方法。构造函数用于初始化实例的数据，而方法则可以在实例中被调用。
类的继承
类的继承是面向对象编程中一个非常重要的概念。在 ES6 中，类的继承可以通过 extends 关键字来完成，例如：
-- -------------------- ---- -------
----- --- ------- ------ -
----------------- ------ -
------------
---------- - ------
-
------ -
---------------------
-
-在这个例子中，我们定义了一个 Dog 类，它继承了 Animal 类，并添加了一个 bark() 方法。通过 super() 方法调用父类的构造函数，以便正常设置实例的属性。
实例属性
ES6 的类中，实例属性可以在构造函数中声明和初始化，例如：
class Animal {
constructor(name) {
this.name = name;
this.color = 'white';
}
}在上面这个例子中，我们定义了一个 Animal 类，它具有一个名为 name 的实例属性和一个名为 color 的默认实例属性。
在 ES8 中，可以使用快速语法对实例属性进行声明和初始化：
class Animal {
name;
color = 'white';
constructor(name) {
this.name = name;
}
}在这个例子中，我们使用了更加简洁的语法来定义了实例属性。其中，name 直接声明在类中，而 color 的默认值直接赋值给了属性。
静态属性
ES6 的类中，可以定义静态属性来作为类本身的属性。例如：
class Animal {
static type = 'mammal'
}在上面这个例子中，我们定义了一个 Animal 类，它具有一个静态属性 type。由于静态属性属于类本身，并不是实例的属性，因此可以直接通过类访问。
静态方法
静态方法与静态属性类似，它们都是属于类本身的方法。在 ES6 中，可以通过 static 关键字来定义静态方法，例如：
class Animal {
static type = 'mammal';
static getType() {
return this.type;
}
}在这个例子中，我们定义了一个 Animal 类，它有一个静态方法 getType()，该方法返回该类的类型。
具名类表达式
具名类表达式可以显式命名一个类，例如：
let Animal = class Animal {
constructor(name) {
this.name = name;
}
};在这个例子中，我们定义了一个具名类表达式，它显式地命名了一个 Animal 类。在类中，我们访问 this.name 可以获得实例的名称。
计算的成员和方法名称
在 ES8 中，类的成员名称和方法名称可以使用计算属性和计算方法名称的语法糖，例如：
class Animal {
['name'] = 'unknown';
[Symbol('type')]() {
return 'mammal';
}
}在这个例子中，我们定义了一个 Animal 类，它使用计算属性设置了实例的 name 属性，并使用计算方法名称设置了实例的 type。
结论
通过本文我们详细了解了 ECMAScript 2017 （ES8） 中的类（Class）的新特性和改进。使用类可以更加方便地进行面向对象编程，而 ES8 中新增的特性则更加简化了类的定义和使用。希望本文能够对您更好地理解和使用类提供一些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714a732ad1e889fe214d42b