如何充分发挥 ECMAScript 2021 中类的作用

如何充分发挥 ECMAScript 2021 中类的作用

ECMAScript 2021 中,类是一个新特性。类被设计用于让 JavaScript 开发者更容易地使用面向对象编程。来自其他编程语言的开发者也会非常愿意将其用于 JavaScript 项目中。这篇文章将着重讨论如何在项目中充分利用与实施 ES6 类的技术。

类的基础

类是 ECMAScript 2021 中的一项功能,可用于创建对象。它是 JavaScript 中一种新的数据类型。类由类名、属性和方法组成。使用类,开发者可以将相关的属性和方法组合在一起以创建一个对象实例。与 ES5 中原型一样,类也支持继承和多态性。

首先,需要注意的是类的定义方法非常简单:

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

在 ES6 中,类定义不再需要构造函数,因为类及其成员默认所有方法都已经声明为类的原型成员。比如说,定义一个名为 Circle 的类,它拥有可以计算圆的面积和周长的方法,可以这样写:

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

在上面的代码中,我们定义了一个 Circle 类,它接收一个半径参数来构造一个 Circle 对象。然后,通过在 Circle 类的原型上定义 areaperimeter 方法来为 Circle 类对象提供计算圆的面积和周长的功能。

访问控制和封装

在类中,所有的属性和方法默认都是公开的,这意味着它们在对象实例和子类中都可以进行访问和修改。但是,在某些情况下,您可能希望限制对类的访问,这就需要借助封装实现访问控制。

在 JavaScript 中,访问控制可以通过使用私有或受保护成员来实现。私有成员只能在类内部访问,而受保护成员可以在类及其子类内部访问。

要将属性或方法设置为私有,您可以使用以下命名约定:

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

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

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

在上面的示例中,我们将 nameemail 属性设置为私有成员。使用 # 符号将属性名称放在类内部时,即表示这些属性是私有的。所以在调用 class.print() 方法的时候,nameemail 属性只能在 Student 类本身内部访问。

要将属性或方法设置为受保护成员,按照以下命名约定:

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

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

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

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

在上面的示例中,我们将 nameage 属性设置为受保护成员。使用 _ 符号将属性名称放在类内部时,即表示这些属性受保护。在 Person 类内部,可以访问这些属性和方法。在受到继承的类中,可以访问这些属性和方法。

继承

在类的继承方面,类也是 ECMAScript 2021 中新添加的特性。与 ES6 中的继承类似,ES6 类的继承也是通过 extends 关键字实现的,如下所示:

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

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

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

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

在上面的示例中,我们定义了一个基类 Animal 和一个继承于 Animal 的子类 Dog。在子类 Dog 中,我们使用了 super 关键字来调用父类 Animal 的构造方法,并在子类的构造函数中初始化了 name 属性。然后,我们覆盖了 Animal 类的 speak 方法,以定义更适合 Dogspeak 行为。

类也可以实现继承的扩展,从而添加新的行为。这可通过在子类上定义新的方法或属性来完成。例如,对于 Dog 类,可以添加一个新的方法 run

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

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

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

在上面的代码中,我们添加了一个 run() 方法。这个新的方法被 Dog 类所拥有,但它是通过从 Animal 类继承而来的。

多态性

多态性是指同样的方法可以在不同的对象上执行,并产生不同的结果。通过多态性,通过使用不同的子类来扩展基类,可以轻松地扩展一个系统。

在 ES6 类中,多态性是通过继承和方法覆盖来实现的。当子类要覆盖方法时,它可以调用父类的方法。例如,在下面的代码中,为覆盖 speak() 方法,Cat 类使用了 super.speak() 方法来调用父类的 speak() 方法:

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

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

在上面的代码中,我们定义了一个名为 Cat 的子类,其中的 speak() 方法调用了父类的 speak() 方法,并在 console.log() 表达式中添加新的词。这就产生了多态行为。

结论

ECMAScript 2021 中添加的类是 JavaScript 的一个新特性,直接实现了面向对象编程的语言设计原则。本文讨论了 ES6 类的实现方法,以及如何利用类的特性来创建具有封装、继承和多态的面向对象体系结构。当然,类的应用还可以有很多其他的实现方式和实践,程序员们可以通过在项目中实现具体类和相关方法来探索其更深层次的功能和应用。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/670dd3ff5f551281025e8cfa


猜你喜欢

  • AngularJS SPA 应用面临的 5 种挑战及解决方案

    前言 AngularJS 是一个流行的前端框架,被广泛应用于单页面应用程序(SPA)。然而,当应用规模变得越来越大时,SPA 应用会面临一些挑战。在本文中,我们将讨论 SPA 应用面临的 5 种挑战以...

    5 天前
  • 手把手教你构建 React + Redux 服务端渲染应用

    React 是一种非常流行的前端框架,可用于构建现代化,响应式的 Web 应用程序。Redux 是一个状态管理库,用于管理 React 应用中的状态。服务端渲染(SSR)在现代 Web 应用程序中越来...

    5 天前
  • Promise 和 Fetch API 的结合应用技巧

    在前端开发中,异步操作是必不可少的一步,而 Promise 和 Fetch API 也成为 Web 开发中最常用的两个 API 之一。本文将介绍 Promise 和 Fetch API 是如何结合使用...

    5 天前
  • Web Components 实践:结合 React 和 Shadow DOM 应用

    前言 Web Components 是一组不同的技术,可以让你创建可重用的自定义元素(custom elements)和封装的功能,可以结合 React 和 Shadow DOM 应用,这篇文章将会介...

    5 天前
  • Enzyme + React Native:测试重构示例

    介绍 在软件开发中,测试是非常重要的一环。在前端开发中,使用 Enzyme 测试框架可以帮助我们更方便地对 React Native 组件进行测试,并且提高测试的可维护性,减少代码冗余。

    5 天前
  • ES10:解析 Object.fromEntries 和 Array.prototype.flat

    在 ECMAScript 2019(ES10)中,引入了两个新的方法 Object.fromEntries 和 Array.prototype.flat。这两个方法在前端开发中非常有用,本文将对它们进...

    5 天前
  • 使用 Twitter 的 Scala 标记 Livy 的基于 GraphQL 的图形界面

    前言 在前端类技术中,Livy 是一款广泛使用的 Spark 实时编程工具。它是一个基于 REST API 的交互式 Spark Shell,通过提交 Spark 作业来实现对 Spark 的编程。

    5 天前
  • Fastify 中处理日志记录的最佳实践

    在前端开发中,日志记录是重要的一环,它可以帮助开发者快速识别和解决问题。Fastify 是一个快速、低开销的 Node.js Web 框架,它提供了很多功能方便开发者处理日志记录。

    5 天前
  • PM2 自动重启自适应

    PM2 是一个流行的 Node.js 进程管理工具,它可以帮助你轻松地管理 Node.js 应用程序的启动、停止和重启操作。PM2 还具有可靠的自动重启、自适应和负载平衡功能,可以适用于各种不同的生产...

    5 天前
  • 使用 Chai 和 Mocha 测试 JavaScript 闭包

    什么是 JavaScript 闭包 在 JavaScript 中,闭包是指函数可以访问其外部作用域的变量,即使函数在外部作用域已经执行完了。简单来说,闭包是指函数可以“记住”它被创建时的环境。

    5 天前
  • 如何使用 TypeScript 编写高效的 Angular 应用程序

    在前端开发中,Angular 是一款流行的 MVVM 框架。而 TypeScript 是一种静态类型的 JavaScript 超集。使用 TypeScript 开发 Angular 应用程序可以提高代...

    5 天前
  • 使用性能分析工具识别 Web 应用的瓶颈

    使用性能分析工具识别 Web 应用的瓶颈 Web 应用经常面临性能问题,尤其是当用户增加、数据量增多的时候,这些问题会变得更加明显。寻找和解决性能问题是很重要的,这涉及到许多方面,如用户体验、SEO ...

    5 天前
  • 如何使用 Firebase 实现 PWA 应用的实时同步

    随着 PWA 技术的日益普及,越来越多的 Web 应用开始使用 PWA 技术来提升用户的体验。而 Firebase 作为全球最大的后端即服务平台之一,提供了诸多功能强大的工具和服务,可以帮助开发者快速...

    5 天前
  • 如何在市场上推广无障碍网站

    随着社会的进步和人们的关注,无障碍网站已成为越来越重要的热点话题。无障碍网站指的是无论是在视觉、听力、理解、沟通上,都能够包容和服务到残障人士、老年人以及其他特殊人群的网站。

    5 天前
  • 使用 Jest 进行 GraphQL 的 API 测试

    前言 GraphQL 是一种用于 API 的查询语言和运行时环境。与 REST 相比,GraphQL 允许客户端精确地描述需要从服务器获取的数据。这种能力使得客户端只需发送一次请求即可获取所需数据,而...

    5 天前
  • Promise 在 Async/Await 中的应用详解

    随着 Web 技术的不断发展,前端已经发展成了一个大而全的领域。JavaScript 作为前端的重要语言,它也在逐步发展着。Promise 和 Async/Await 是 JavaScript 中的两...

    5 天前
  • 在 Tailwind 中移动图标的最佳方法是什么?

    Tailwind 是一个流行的 CSS 框架,它提供了丰富的样式工具,包括移动图标。但是,移动图标在 Tailwind 中的使用可能会有一些挑战。本文将介绍如何在 Tailwind 中移动图标的最佳方...

    5 天前
  • 详解 ECMAScript 2020 的 Promise.any() 和 Promise.allSettled() 方法

    在 ECMAScript 2020(简称 ES2020)中,Promise 类型新增了两个方法,分别是 Promise.any() 和 Promise.allSettled()。

    5 天前
  • 如何在 GraphQL 中构建快速响应的 API

    GraphQL 是一种被广泛应用于构建 API 的查询语言和运行时环境。其优点包括易于使用、高度可配置以及对客户端请求的灵活性等。然而,在创建 GraphQL API 时,要实现快速响应的API ,需...

    5 天前
  • 如何在 Fastify 中使用 JWT 进行身份认证

    在现代的 Web 应用中,身份认证是一项非常重要的功能。其中,JWT(JSON Web Token)是最常用的身份认证方案之一。它不仅可以用于身份认证,还可以用于授权和数据交换。

    5 天前

相关推荐

    暂无文章