ES6 的 class 用法以及与 ES5 不同的地方

介绍

在 JavaScript 中,ES5 中用函数来实现类的概念,而 ES6 中引入了 class 关键字,让类的定义更加直观且易于理解。ES6 的 class 继承也更加符合面向对象编程的概念。

定义和使用 class

定义一个 class 需要使用关键字 class,后跟类名和一个类体。类体中包含构造函数、属性和方法。

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

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

在上面的例子中,我们定义了一个类 Person,它有一个构造函数来初始化 name 和 age 属性。它还有一个方法 sayHello,它将打印这个 person 的信息。

我们可以通过执行以下代码来创建一个新的 Person 实例:

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

类的继承

ES6 类还支持继承。继承可以让我们从一个类中派生出另一个类,新的类可以继承和扩展原来的类。

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

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

在上面的例子中,我们定义了一个从 Person 类中派生出来的新类 Student。我们使用 extends 关键字来创建 Student 类,并将其继承自 Person。在构造函数中,我们调用了 super() 方法来调用父类的构造函数,并传入 name 和 age 属性。我们还添加了一个新的 grade 属性,并在 sayHello() 方法中重载了它。

我们可以通过执行以下代码来创建一个新的 Student 实例:

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

ES6 class 与 ES5 的不同之处

ES6 class 和 ES5 中的函数类有很大的不同。以下是一些重要的不同之处:

  1. class 中的方法不需要使用 function 关键字来声明,也不需要使用逗号来分隔它们。
  2. class 的方法中默认使用了 strict 模式。
  3. class 使用 constructor() 方法来定义类的初始化行为。
  4. super() 方法调用父类的构造函数。在 ES5 中,使用 Object.create(prototype) 来创建新的对象。
  5. 在 class 中使用 extends 来继承。

结论

ES6 的 class 是 JavaScript 中面向对象编程的重要组成部分。它比 ES5 的函数类更具可读性和可扩展性。同时,ES6 的类还支持继承,让我们可以更容易地创建和管理类之间的关系。在 JavaScript 中,学习和掌握 ES6 的 class 用法是非常重要的。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6721e0bf2e7021665e092bfc