ECMAScript 2017 中，引入了 Class 对象来提供一种更加直观和便捷的类定义和继承方式。Class 提供了更加传统的面向对象编程的形式，与 prototype 的关系也更加明确，在实现上也更加优雅和易读。本文将会深入浅出地分析 Class 的语法和特性，提供完整的示例和学习指导。
Class 的语法和声明
Class 的声明形式如下：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
--------- -
------------------------- -- ------ -----------
-
------ ------ -
----------------- -- ------ ---------
-
-上述代码通过 Class 关键字声明了一个名为 Animal 的类，其中包含了一个构造函数 constructor 和两个实例方法 eat 和一个静态方法 info。
需要注意的是，Class 中的实例方法和静态方法的定义没有使用 function 关键字，而是直接定义方法名和参数。在实例方法中使用 this 关键字来获取本身实例的属性和方法，静态方法不包含 this 关键字。
继承和父类
Class 也可以用于继承，使用 extends 关键字来继承某个已存在的父类。下面展示一个继承的示例代码：
class Dog extends Animal {
bark() {
console.log("woof, woof!");
}
}上述代码定义了一个 Dog 类，继承了 Animal 类，并且增加了一个 bark 方法。
当我们使用继承时，子类的构造函数必须调用父类的构造函数，在 super() 中传递必要的参数，子类才能正常创建实例对象。下面是一个使用继承的示例代码：
let dog = new Dog("Puppy", 2);
dog.eat("bone");
dog.bark();上述代码中，我们通过 Dog 类创建了一个名为 Puppy，年龄为2岁的对象，并且使用 eat 和 bark 方法输出信息。
super 关键字
在继承过程中，我们可以使用 super 关键字来调用父类的属性和方法，例如在子类构造函数中使用 super 关键字来调用父类的构造函数以初始化子类的属性，如下所示：
-- -------------------- ---- -------
----- --- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
--------- -
----------------
------------------------- -- ------ ------- ---- - -------
-
-上述代码中，基于 Animal 的 Dog 类默认拥有 eat 和 constructor 方法，并在 Dog 类中通过 super 调用了父类的构造函数，并调用了父类实例的 eat 方法。
总结
本文深入浅出地分析了 ECMAScript 2017 中的 Class 语法、声明以及继承等特性，并通过完整的示例代码为大家提供了一个指导意义。
Class 作为 ECMAScript 中的新特性，给前端开发带来了便捷和优雅地面向对象方式，她的出现为我们提供了一个更加优雅和易读的前端编程方式。希望这篇文章能够对你的学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffc93d95b1f8cacde139de