ES6 中的 class 和面向对象编程

阅读时长 6 min read

ES6 是 JavaScript 的一个重大更新版本,其中包括了一些重要的特性,如箭头函数,模块化,模板字面量和 Promise。在这些新特性中,class 是其中之一,它给 JavaScript 带来了一种新的面向对象编程方式。

class 简介

在 ES6 之前,JavaScript 并没有一个很完全的面向对象编程体系,而是通过基于对象(prototype-based)的方式来实现面向对象编程的。而 ES6 的 class 关键字则提供了一种更加传统的方式来创建类和对象。

我们先来看一个基本的 class 的示例代码:

-- -------------------- ---- -------
----- ------ -
  ----------------- -
    --------- - -----
  -

  ---------- -
    ------------------- --- ----------------
  -
-

----- --- - --- ----------------

--------------- -- -- ------- --- -------

在这个示例代码中,我们定义了一个叫做 Animal 的类,它有一个成员变量 name 和一个成员方法 sayHello。在成员方法 sayHello 中,我们使用了模板字符串打印出类的名字。

在这之后,我们创建了一个从 Animal 类继承来的 cat 对象,并调用了它的成员方法 sayHello。

面向对象编程的特征

JavaScript 的 class 关键字提供了面向对象编程中的继承、封装和多态特征。

继承

继承是面向对象编程中的一大特征,它让一个类可以继承另一个类的方法和属性,从而避免重复编写相同的代码。

在 JavaScript 中使用 class 可以轻易地实现继承:

-- -------------------- ---- -------
----- ------ -
  ----------------- -
    --------- - -----
  -

  ---------- -
    ------------------- --- ----------------
  -
-

----- --- ------- ------ -
  ----------------- -
    ------------ -- ----- ----------- --
  -

  ------ -
    ------------------ --- ----------------
  -
-

----- --- - --- -------------

--------------- -- -- ------- --- -------
----------- -- -- ------ --- -------

在这个示例代码中,我们创建了另一个叫做 Cat 的 class,它继承了 Animal 的方法和属性。我们使用关键字 extends 来实现继承,并在子类的 constructor 函数中使用 super 关键字来调用父类的 constructor 函数。

子类还可以覆盖父类的方法:

-- -------------------- ---- -------
----- --- ------- ------ -
  ----------------- -
    ------------
  -

  ---------- -
    ----------------- -- ----- -------- --
    ---------------------
  -
-

----- --- - --- -------------

--------------- -- -- ------- --- ------- - -------

在这个示例代码中,我们覆盖了父类的 sayHello 方法,并在自己的方法中调用了父类的 sayHello 方法,从而实现了在子类中修改父类方法的目的。

封装

封装是面向对象编程中的另一个重要特征,它通过使一些属性和方法私有化来避免类外部的代码对内部数据的直接访问。

在 JavaScript 中,我们不能像其他类似 C++ 和 Java 的面向对象编程语言那样实现真正的私有属性和方法。但是我们可以使用类似于命名约定和闭包的方式来模拟私有属性和方法。例如:

-- -------------------- ---- -------
----- ------ -
  ----------------- -
    --- ----- - ----- -- ----

    ------------ - ---------- - -- -------------
      ------ ------
    --
  -

  ---------- -
    ------------------- --- ---------------------
  -
-

----- --- - --- ----------------

--------------------------- -- -- -------
--------------- -- -- ------- --- -------

在这个示例代码中,我们使用了闭包来创建一个私有属性 _name 和一个公有方法 getName,该方法可以访问私有属性。在公有方法 sayHello 中,我们用类似于访问私有属性的方式来调用 getName 方法。

多态

多态是面向对象编程的另一个特征,它允许子类通过实现自己的方法来改变或扩展父类的行为。

在 JavaScript 中,由于它是一门动态的语言,多态并不是很常见,但我们依然可以实现它:

-- -------------------- ---- -------
----- ------ -
  ------- -
    ------------------- ----------
  -
-

----- --- ------- ------ -
  ------- -
    ---------------- ---------
  -
-

----- --- ------- ------ -
  ------- -
    ---------------- ---------
  -
-

-------- ----------------- -
  ---------------
-

----- --- - --- ------
----- --- - --- ------

--------------- -- -- ---- -------
--------------- -- -- ---- -------

在这个示例代码中,我们创建了三个类:Animal、Cat 和 Dog。它们都实现了一个同名的方法 speak,但是在子类中定义的 speak 方法却覆盖了父类的 speak 方法,从而实现了多态。

在 makeSpeak 函数中,我们只接受一个参数 animal,这个 animal 可以是任何一个继承自 Animal 的类的实例。通过调用 animal.speak() 方法,我们就可以让不同的子类表现出不同的行为。

结语

ES6 中的 class 关键字给 JavaScript 带来了一种新的面向对象编程方式。通过本文的介绍,我们可以更加深入地理解 class 的使用方法和面向对象编程的特征,并且可以使用 JavaScript 的面向对象编程来写出更加优雅和高效的代码。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6792be85504e4ea9bd6868ce

Feed
back