在 JavaScript ES6 中，引入了 class 和 extends 这两个新特性，它们为我们提供了更加面向对象的编程方式。在本文中，我们将深入理解 class 和 extends，并给出实际的使用案例。
基本语法
首先，我们需要理解 class 的基本语法。class 关键字后面跟着类名，类名通常以大写字母开头，表示这是一个类。类体中可以定义属性和方法：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- --- - - -----------
-
-上面的代码定义了一个名为 Person 的类，Person 类有两个属性 name 和 age，还有一个方法 sayHi。
在类体中使用 constructor 方法来定义构造函数。构造函数被调用时可以接收一些参数，这些参数被用来初始化实例属性。在上面的例子中，constructor 接收两个参数 name 和 age，并把它们赋值给了 this 对象的属性。
在类体中定义的方法都会被添加到类的 prototype（原型）属性中，从而让所有实例都可以访问。
实现继承
类可以实现继承，这是面向对象编程中最重要的特性之一。ES6 中使用 extends 关键字来实现类的继承：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- --- - - -----------
-
-
----- --- ------- ------ -
------ -
------------------ --------
-
-
--- --- - --- ---------- ---
------------ -- --- --- ---
----------- -- ----- -----在上述代码中，Animal 是一个基类，Dog 是 Animal 的子类。Dog 继承了 Animal 的所有属性和方法。注意，我们在 Dog 类定义时使用了关键字 extends，然后就可以在 constructor 函数中使用 super() 调用 Animal 类的构造函数。
子类还可以覆盖父类的方法或者增加新的方法：
-- -------------------- ---- -------
----- --- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
------- -
---------------- --- - - --------- - -- -- ----- -- - - ------------
-
------ -
------------------ --------
-
-
--- --- - --- ----------- -- ---------
------------ -- --- --- ----- -- ----- -- -----
----------- -- ----- -----上述代码中，Cat 类继承 Animal 类，并覆盖了 sayHi 方法和增加了 meow 方法。
静态方法和属性
静态方法和属性是类自身拥有的方法和属性，不会被实例继承。ES6 中可以使用 static 关键字定义类的静态方法和属性：
-- -------------------- ---- -------
----- ---------- -
------ ------ -- -
------ - - --
-
------ ----------- -- -
------ - - --
-
-
----------------------------- ---- -- -
---------------------------------- ---- -- --上述代码中，Calculator 是一个拥有 add 和 multiply 静态方法的类。我们可以直接使用 Calculator.add 和 Calculator.multiply 来调用这些方法。
在 React 中使用 class 和 extends
React 是一个广泛使用 ES6 的 JavaScript 框架。React 中的组件通常使用 class 和 extends 来定义。这是因为 class 提供了更好的组织和封装，并且可以方便地实现继承和复用。
下面是一个简单的 React 组件例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
-------- --
--
---------------- - ----------------------------
-
------------- -
------------------------- -- -
------ - -------- ----------------- - - --
---
-
-------- -
------ -
-----
----------- ------------------------
------- -------------------------------------
------
--
-
-
------ ------- --------上述代码中，Counter 组件继承了 React 的 Component 类。我们在 constructor 中初始化了组件的 state，然后在 handleClick 方法中更新 state。最后在 render 方法中渲染组件。
总结
在本文中，我们详细介绍了 ES6 中的 class 和 extends 的使用方法，并且给出了实际的案例。学习并掌握 class 和 extends 是非常重要的，它们为我们提供了更加面向对象的编程方式，可以帮助我们更好地组织和封装代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497a15848841e989449f681