介绍
在 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 中的函数类有很大的不同。以下是一些重要的不同之处:
- class 中的方法不需要使用 function 关键字来声明,也不需要使用逗号来分隔它们。
- class 的方法中默认使用了 strict 模式。
- class 使用 constructor() 方法来定义类的初始化行为。
- super() 方法调用父类的构造函数。在 ES5 中,使用 Object.create(prototype) 来创建新的对象。
- 在 class 中使用 extends 来继承。
结论
ES6 的 class 是 JavaScript 中面向对象编程的重要组成部分。它比 ES5 的函数类更具可读性和可扩展性。同时,ES6 的类还支持继承,让我们可以更容易地创建和管理类之间的关系。在 JavaScript 中,学习和掌握 ES6 的 class 用法是非常重要的。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6721e0bf2e7021665e092bfc