在前端开发中，面向对象编程是一个重要的概念。继承是面向对象编程中的一个核心概念，它允许我们在已有类的基础上构建新的类，从而达到代码复用的目的。在 JavaScript 中，继承的实现方式有很多种。ES6 的 class 和 extends 关键字使得实现继承变得更加容易和直观。在本文中，我们将讨论如何使用 ES6 的 class 和 extends 实现继承的详细步骤。
类的基本语法
在 ES6 中定义一个类的基本语法如下：
-- -------------------- ---- -------
----- ------- -
------------- -
-- -----------
-
--------- -
-- -------
-
--------- -
-- -------
-
-ES6 的类和传统的类有些不同，它不是一个真正的类，而是一个函数。在使用 class 定义类时，我们需要提供一个构造函数 constructor()，用于定义类实例的属性和初始状态。类中的方法定义与普通函数的定义类似。
继承的实现
ES6 的继承通过 extends 关键字来实现。继承可以帮助我们复用已有的代码，避免代码冗余。使用 extends 关键字可以让子类继承父类的所有属性和方法，同时子类还可以在父类的基础上扩展自己的方法。
例如，我们有一个 Animal 类，它有一个 eat() 方法，我们可以使用 class 和 extends 关键字定义它的子类 Dog：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
----- -
------------------------- -- ----------
-
-
----- --- ------- ------ -
----------------- -
------------
-
------ -
------------------------- -- -----------
-
-在上面的代码中，我们使用 extends Animal 来定义 Dog，意味着它继承了 Animal 的所有方法和属性。在子类中我们使用 super() 来调用父类的 constructor() 方法，这里通过传递子类初始化时的参数来实现。
在 Dog 类中，我们定义了一个新的方法 bark()。现在，我们已经成功地扩展了 Animal 的功能，使得 Dog 既可以 eat() 也可以 bark()。
深入理解类的继承关系
在上面的例子中，我们已经成功地实现了继承。但是，真正理解继承的实现需要深入了解类的原型关系。
在 ES6 中，类与原型关系是通过 [[Prototype]] 连接在一起的。类的继承关系也是基于原型链的。
在上面的例子中，我们定义了 Animal 类和 Dog 类，使它们形成了父子继承的关系。由于 Dog 类继承自 Animal 类，所以 Dog 类的实例也可以看作是 Animal 类的实例。因此，在创建 Dog 类的实例时，我们可以使用 instanceof 操作符进行判断：
const dog = new Dog("Tom");
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true通过上面的代码可以看到，我们已经成功地实现了类的继承，并且能够正确地判断实例的类型。
总结
在本篇文章中，我们讨论了使用 ES6 的 class 和 extends 关键字实现继承的方法。通过继承，我们能够实现代码的复用，避免代码冗余。我们了解了类的基本语法和继承的实现方式，同时，深入理解了类的原型关系和继承链。希望本文能够对你加深对类和继承的理解和应用。最后，我们来看一下完整的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
----- -
------------------------- -- ----------
-
-
----- --- ------- ------ -
----------------- -
------------
-
------ -
------------------------- -- -----------
-
-
----- --- - --- -----------
---------- -- --- -- -------
----------- -- --- -- --------
--------------- ---------- ----- -- ----
--------------- ---------- -------- -- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d3cf5968c7c53b080c654