当前位置：首页 > 科技 > 软件

你有多久没在 JS 中使用 class 了？

来源：责编：时间：2024-07-05 09:02:20 1013观看

导读Hello，大家好，我是 Sunday。在 ES6 的规范中（2015年），ECMAScript 推出了 class 语法。class 本质上是对基于原型的继承机制的一种语法糖，其目的是为了使定义和继承对象更加简洁和清晰。并且，这种语法在其他的语言（比如：java）中

Hello，大家好，我是 Sunday。

在 ES6 的规范中（2015年），ECMAScript 推出了 class 语法。

class 本质上是对基于原型的继承机制的一种语法糖，其目的是为了使定义和继承对象更加简洁和清晰。并且，这种语法在其他的语言（比如：java）中都有非常广泛的应用。

但是，不知道从什么时候开始，我们好像已经逐渐遗忘了 class，特别是在现在基于框架（Vue 或者 React）的项目中。

那么到底是因为什么原因导致 class 逐渐没落，目前 class 的应用场景又是什么呢？今天，咱们就来看一看这个问题。

01：JS 的独特特性

JavaScript 是一种动态、弱类型的语言，具有其独特的特性：

原型继承：JS 的核心是基于原型的继承机制，而不是传统的类继承。每个对象可以作为另一个对象的原型，从而实现属性和方法的共享。
函数式编程：函数是 JS 中的一等公民。同时在 JS 中我们习惯了使用函数可以作为参数传递，也可以作为返回值。
灵活性：JS 是一种弱类型语言，变量可以在不同时间持有不同类型的值。这种动态特性使得语言更加灵活。同时对象的结构可以在运行时动态改变，属性可以随时添加、删除或修改

这些特性使得 JavaScript 在很长一段时间内依赖于构造函数和原型链来实现面向对象编程，而不是类继承。

02：Vue 和 React 并不推崇使用 class

Vue 和 React 是目前两个最受欢迎的框架，但是它们并不推崇使用 class 语法：

Vue

选项式 API：Vue 2 采用的是选项式 API，我们通过定义对象的属性（如 data、methods、computed 等）来构建组件，而不是通过类继承。
组合式 API：Vue 3 引入了组合式 API（Composition API），提供了一种更灵活的方式来组织和复用逻辑，通过函数和钩子的组合来管理状态和生命周期方法，而不依赖于 class。

React

函数组件：React 从一开始就支持函数组件，随着 React 16.8 引入 Hooks，函数组件变得更加强大和灵活，几乎可以替代类组件的所有功能。所以，从 16.8 以后 React 不再推荐使用类组件。而专用函数是组件和 hooks
Hooks：Hooks 提供了在函数组件中管理状态和副作用的能力，例如 useState、useEffect、useContext 等，这些 hooks 目前是组件 react 项目的核心功能

基于此，我们可以在线，目前无论是 Vue 还是 React，都不在有使用 class 的场景。

那么，目前 class 就已经完全没有应用场景了吗？也不是！

03：class 的应用场景有什么？

尽管 class 在项目前端开发中逐渐减少使用，但它在一些特定场景中仍然有其独特的应用价值：

面向对象编程（OOP）：对于那些习惯于面向对象编程的开发者（特别是 java 转前端的开发者），class 提供了一种更熟悉和直观的方式来定义和继承对象。它在一些大型、复杂的项目中，特别是需要严格的对象模型和继承层次时，依然具有优势。
工具库和框架：在一些工具库和框架中，class 仍然被广泛使用。例如，很多 JavaScript 库（如 Three.js、Vue.js 等）依然使用 class 来定义核心对象和模块。
服务器端开发：在 Node.js 环境中，class 也经常被用来定义模块和组件，特别是在使用 TypeScript 时

总结

针对 class 而言，虽然我们在日常的项目开发中很少有应用场景。但是在进行库（原生的 JS 或 TS）开发时，class 依然具备独特的优势。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-98860-0.html你有多久没在 JS 中使用 class 了？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：阿里校招面试，我来瞅瞅怎么回事

下一篇：业务侧最好的朋友：微服务中的 BFF 架构

标签：

热门焦点

天猫精灵Sound Pro体验：智能音箱没有音质？来听听我的

这几年除了手机作为智能生活终端最主要的核心之外，第二个可以成为中心点的产品是什么？——是智能音箱。手机在执行命令的时候有两种操作方式，手和智能语音助手，而智能音箱只
一加首款折叠屏！一加Open渲染图出炉：罕见单手可握小尺寸

8月5日消息，此前就有爆料称，一加首款折叠屏手机将会在第三季度上市，如今随着时间临近，新机的各种消息也开始浮出水面。据悉，这款新机将会被命名为“On
JavaScript 混淆及反混淆代码工具

介绍在我们开始学习反混淆之前，我们首先要了解一下代码混淆。如果不了解代码是如何混淆的，我们可能无法成功对代码进行反混淆，尤其是使用自定义混淆器对其进行混淆时。什么是混
CSS单标签实现转转logo

转转品牌升级后更新了全新的Logo，今天我们用纯CSS来实现转转的新Logo，为了有一定的挑战性，这里我们只使用一个标签实现，将最大化的使用CSS能力完成Logo的绘制与动画效果。新logo
服务存储设计模式：Cache-Aside模式

Cache-Aside模式一种常用的缓存方式，通常是把数据从主存储加载到KV缓存中，加速后续的访问。在存在重复度的场景，Cache-Aside可以提升服务性能，降低底层存储的压力，缺点是缓存和底
得物宠物生意「狂飙」，发力“它经济”

作者｜花花小萌主近日，得物宣布正式上线宠物鉴别，通过得物App内的“在线鉴别”，可找到鉴别宠物的选项。通过上传自家宠物的部位细节，就能收获拥有专业资质认证的得物鉴
当家的盒马，加速谋生

来源 | 价值星球Planet作者 | 归去来自己“当家”的盒马，开始加速谋生了。据盒马官微消息，盒马计划今年开放生鲜供应链，将其生鲜商品送往食堂。目前，盒马在上海已经与
OPPO K11样张首曝：千元机影像“卷”得真不错！

一直以来，OPPO K系列机型都保持着较为均衡的产品体验，历来都是2K价位的明星机型，去年推出的OPPO K10和OPPO K10 Pro两款机型凭借各自的出色配置，堪称有
上海举办人工智能大会活动，建设人工智能新高地

人工智能大会在上海浦江两岸隆重拉开帷幕，人工智能新技术、新产品、新应用、新理念集中亮相。8月30日晚，作为大会的特色活动之一的上海人工智能发展盛典人工