ECMAScript 2015(ES6)中的类和继承详解

阅读时长 4 分钟读完

随着 JavaScript 的广泛应用和不断发展,ECMAScript 2015(以下简称 ES6)在语法方面进行了重大的更新,其中包括类和继承的引入。

类的定义

在 ES6 之前,JavaScript 并没有类这个概念,只有对象、函数等构造器。而 ES6 中引入了类的概念,让 JavaScript 更加面向对象化。

一个最基本的类定义语法如下:

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

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

接下来我们详细解释上述代码的意思。首先,我们通过 class 关键字定义了一个名为 Person 的类。类包含一个 constructor 方法,它是一个特殊的方法,用来创建并初始化对象。

在上面的代码中,我们在 constructor 方法中定义了两个属性 nameage,并使用 this 关键字来将它们绑定到类的实例上。我们还定义了一个 sayHello 方法,它会在控制台输出一条问候语。

类的实例化

在 ES6 中,通过 new 关键字来创建类的实例,实例如下:

我们可以根据类创建多个实例,并调用类的方法。上述代码会创建两个名为 person1person2 的实例,并使用 sayHello 方法输出问候语。

继承

JavaScript 中的继承是通过原型链实现的,而 ES6 中引入了更加清晰和直观的继承语法。我们可以通过 extends 关键字定义一个类的子类或派生类,下面是一个例子:

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

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

在上述代码中,我们创建了一个 Student 类,它是 Person 类的子类。我们使用 extends 关键字来声明 StudentPerson 的派生类。此外,我们在 Student 类的构造函数中使用 super 关键字来调用其父类的构造函数,并传递 nameage 参数。

我们还重新定义了 sayHello 方法,并在其中使用 super 关键字来调用其父类的同名方法,然后输出学生的年级。

示例代码

以下是一个完整的示例代码,包括类和继承的使用:

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

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

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

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

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

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

总结

本文介绍了 ES6 中类和继承的使用方法,它们让 JavaScript 更加面向对象化。类的定义包括了构造函数和方法,实例化类使用 new 关键字,继承使用 extends 关键字。希望这篇文章能够帮助读者深入理解 ES6 中的类和继承,并对前端开发有所启发。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6480651048841e9894fdcf89

纠错
反馈