随着 JavaScript 的广泛应用和不断发展，ECMAScript 2015（以下简称 ES6）在语法方面进行了重大的更新，其中包括类和继承的引入。
类的定义
在 ES6 之前，JavaScript 并没有类这个概念，只有对象、函数等构造器。而 ES6 中引入了类的概念，让 JavaScript 更加面向对象化。
一个最基本的类定义语法如下：
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ----------------
-
-接下来我们详细解释上述代码的意思。首先，我们通过 class 关键字定义了一个名为 Person 的类。类包含一个 constructor 方法，它是一个特殊的方法，用来创建并初始化对象。
在上面的代码中，我们在 constructor 方法中定义了两个属性 name 和 age，并使用 this 关键字来将它们绑定到类的实例上。我们还定义了一个 sayHello 方法，它会在控制台输出一条问候语。
类的实例化
在 ES6 中，通过 new 关键字来创建类的实例，实例如下：
--- ------- - --- ------------- ---- --- ------- - --- --------------- ---- ------------------- -- -- ------- -- ---- -- ----- ------------------- -- -- ------- -- ---- -- -------
我们可以根据类创建多个实例，并调用类的方法。上述代码会创建两个名为 person1 和 person2 的实例，并使用 sayHello 方法输出问候语。
继承
JavaScript 中的继承是通过原型链实现的，而 ES6 中引入了更加清晰和直观的继承语法。我们可以通过 extends 关键字定义一个类的子类或派生类，下面是一个例子：
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
-----------------
---------------- - ----- ------------- -----------
-
-在上述代码中，我们创建了一个 Student 类，它是 Person 类的子类。我们使用 extends 关键字来声明 Student 是 Person 的派生类。此外，我们在 Student 类的构造函数中使用 super 关键字来调用其父类的构造函数，并传递 name 和 age 参数。
我们还重新定义了 sayHello 方法，并在其中使用 super 关键字来调用其父类的同名方法，然后输出学生的年级。
示例代码
以下是一个完整的示例代码，包括类和继承的使用：
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ----------------
-
-
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
-----------------
---------------- - ----- ------------- -----------
-
-
--- ------ - --- ------------- ----
--- ------- - --- ---------------- --- ---
------------------ -- -- ------- -- ---- -- -----
------------------- -- -- ------- -- ---- -- ------- - ---- - ----- - ---------总结
本文介绍了 ES6 中类和继承的使用方法，它们让 JavaScript 更加面向对象化。类的定义包括了构造函数和方法，实例化类使用 new 关键字，继承使用 extends 关键字。希望这篇文章能够帮助读者深入理解 ES6 中的类和继承，并对前端开发有所启发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6480651048841e9894fdcf89