JS中的class关键字怎么用?和构造函数有什么区别?

javascript 中的 class 是 es6 引入的语法糖,用于更清晰地定义对象模板,其本质仍基于原型继承。1. 定义类使用 class 关键字,内部通过 constructor 初始化属性,方法直接写在类体中;2. 创建实例需用 new 调用;3. class 与构造函数的区别包括:写法不同、不存在变量提升、必须用 new 调用、类中方法不可枚举;4. class 常用特性包括静态方法(static)、继承(extends 和 super)、getter/setter;5. 推荐在现代代码或需要继承时使用 class,而在维护旧项目或兼容老旧浏览器时使用构造函数。

JS中的class关键字怎么用?和构造函数有什么区别?

在 JavaScript 中,class 关键字是 ES6 引入的一种语法糖,用来更清晰、更简洁地定义对象的模板。它本质上还是基于原型(prototype)的继承机制,只是写法上更接近传统面向对象语言。

class 是怎么用的?

定义一个类的基本方式如下:

class Person {  constructor(name, age) {    this.name = name;    this.age = age;  }  sayHello() {    console.log(`你好,我是${this.name}`);  }}

使用这个类创建实例就和构造函数一样:

const p1 = new Person('小明', 20);p1.sayHello(); // 输出:你好,我是小明

可以看出,class 的写法比传统的构造函数更直观,方法直接写在类里,不需要手动操作 prototype

class 和构造函数有什么区别?

虽然它们最终实现的功能是一样的,但有几个关键点需要注意:

写法不同
构造函数通常是一个函数,方法要通过 prototype 添加;而 class 更结构化,方法直接写在类体中。

不存在变量提升(hoisting)
使用 class 定义的类不会被提升,必须先定义再使用,否则会报错(ReferenceError)。构造函数则可以先调用后定义。

必须用 new 调用
class 只能通过 new 创建实例,直接调用会报错。构造函数可以用普通函数方式调用(虽然不推荐)。

类中的方法不可枚举
类中定义的方法默认是不可枚举的(enumerable 为 false),而构造函数通过 prototype 添加的方法是可枚举的。

class 还有哪些常用特性?

除了基本用法,class 还支持一些更实用的特性:

1. 静态方法(static)

静态方法属于类本身,而不是实例:

class Person {  static info() {    console.log('这是一个Person类');  }}Person.info(); // 正确// new Person().info(); // 报错

2. 继承(extends 和 super)

class 支持使用 extends 实现继承,子类中使用 super() 调用父类构造函数:

class Student extends Person {  constructor(name, age, grade) {    super(name, age); // 调用父类构造函数    this.grade = grade;  }}

3. getter / setter

可以在类中定义属性的获取和设置逻辑:

class Person {  constructor(firstName, lastName) {    this._firstName = firstName;    this._lastName = lastName;  }  get fullName() {    return `${this._firstName} ${this._lastName}`;  }  set fullName(value) {    const parts = value.split(' ');    this._firstName = parts[0];    this._lastName = parts[1];  }}

什么时候该用 class?什么时候用构造函数?

如果你写的代码偏向现代风格、需要继承、或者希望结构清晰,建议使用 class。如果你在维护旧项目、或者需要兼容老旧浏览器(比如 IE),可能还需要用构造函数 + prototype 的方式。在大多数现代框架(如 React、Vue 的组合式 API 出现前)中,class 曾是组织组件逻辑的主要方式。

基本上就这些了。class 看起来简单,但背后还是原型那一套机制,理解这一点对深入掌握 JS 很有帮助。

以上就是JS中的class关键字怎么用?和构造函数有什么区别?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1505581.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JS中的事件循环是什么?如何理解?
上一篇 2025年12月20日 03:48:43
怎么看node.js版本
下一篇 2025年12月20日 03:48:54

相关推荐

  • 苹果15换屏幕费用是多少

    官方维修费用:品质与保障的代价 苹果官方售后以其高标准的服务和原装零部件著称。针对iPhone 15的屏幕更换,官方定价普遍处于1000元至2000元区间,具体费用会因机型差异(如标准版与Pro版)以及所在城市而有所不同。这一价格不仅体现了苹果品牌的技术投入与服务保障,也确保了维修后的设备性能与出厂…

    2026年9月24日
    200
  • 《Python完全自学教程》免费在线连载1.5

    《Python完全自学教程》免费在线连载1.5《Python完全自学教程》免费在线连载1.5《Python完全自学教程》免费在线连载1.5《Python完全自学教程》免费在线连载1.5

    说明: 本节内容,是针对非计算机专业的读者提供的补充知识。 1.5 操作系统 本节不是全面介绍操作系统知识,是提醒读者从开发者的角度认识自己的操作系统——根据多年的经验,至少要能熟练使用一些命令完成常见操作。 首先要声明硬件设备,本书所演示的代码都是基于个人计算机( Personal Compute…

    2026年9月24日 用户投稿
    700
  • Linux用户adduser与useradd命令区别

    adduser是交互式脚本,默认创建家目录并设密码,适用于Debian/Ubuntu;2. useradd是底层命令,需手动加参数创建家目录和Shell,通用性强,适合脚本使用。 在Linux系统中,adduser 和 useradd 都可以用来创建新用户,但它们在实现方式、使用习惯和功能上存在明显…

    2026年9月24日
    000
  • 如何在PHP的require语句中传递参数并有效管理变量作用域

    本文探讨了在php中使用`require`或`include`语句时如何向被引入文件传递参数。文章详细阐述了通过直接变量作用域共享、利用`$_get`超全局变量(不推荐)以及将引入文件内容封装为函数或类(推荐最佳实践)这三种方法,并提供了相应的代码示例,旨在帮助开发者理解和选择最适合其场景的参数传递…

    2026年9月24日
    000
  • 迅雷浏览器怎么开启深色模式_迅雷浏览器夜间模式设置

    开启迅雷浏览器深色模式可减少夜间用眼疲劳,具体方法包括:一、通过浏览器菜单进入设置,选择外观中的深色或夜间主题,或开启“跟随系统”选项实现自动切换;二、在操作系统中启用深色模式(Windows路径为“设置>个性化>颜色”,macOS为“系统设置>通用>外观”),并确保浏览器版本最新以兼容显示;三、若…

    2026年9月24日
    100
  • VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧

    VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧

    vscode通过集成语言服务协议(lsp)、内置quick fixes和refactoring actions,并结合扩展如eslint、prettier等,实现代码自动修复与智能重构;2. 启用editor.formatonsave和editor.codeactionsonsave设置可在保存时自…

    2026年9月24日 用户投稿
    100
  • qq浏览器怎么看3d网页效果_QQ浏览器体验WebGL 3D网页效果指南

    首先启用QQ浏览器的高速渲染组件并确保其已安装开启,然后将页面切换至极速模式以支持WebGL,接着更新显卡驱动以保障图形渲染正常,最后清除浏览器缓存与重置设置排除故障,按此步骤可解决3D网页黑屏、白屏问题。 如果您尝试在QQ浏览器中查看3D网页效果,但页面无法正常显示或出现黑屏、白屏,可能是由于浏览…

    2026年9月24日
    100
  • VSCode 怎样设置文件的自动命名规则 VSCode 文件自动命名规则的设置技巧​

    vscode 本身不提供图形界面设置文件自动命名,但可通过配置 emmet.variables 和使用插件实现;2. 可在 settings.json 中添加如 “emmet.variables”: { “today”: “${tm_yea…

    2026年9月24日
    100
  • phpMyAdmin快速导出文件字符集配置指南

    本文详细介绍了phpMyAdmin快速导出功能中文件字符集的默认设置及其配置方法。默认情况下,快速导出生成的文件采用UTF-8编码。用户可以通过修改phpMyAdmin的配置文件config.inc.php,利用$cfg[‘Export’][‘charset&#8…

    2026年9月24日
    100
  • edge浏览器怎么关闭购物功能和优惠券提示_edge浏览器关闭购物优惠提示方法

    1、关闭Edge购物助手:进入设置→辅助功能→购物助手,关闭“在购物时比较价格”和“自动应用优惠券”。2、禁用个性化推荐:进入个人资料→隐私、搜索和服务→个性化和服务,关闭相关个性化选项。3、清除购物数据并重置通知权限:清除所有时间的Cookie与缓存,在网站权限中阻止购物类网站的通知。 如果您在使…

    2026年9月24日
    100
  • PCIe 4.0和PCIe 5.0的固态硬盘,实际使用差别大吗?

    PCIe 5.0 SSD相比4.0在游戏加载中提升有限,仅快1-2秒且感知不强;但在视频剪辑、AI训练等生产力场景下,顺序读写速度提升近一倍,渲染和文件传输效率显著提高。 PCIe 4.0和5.0固态硬盘在实际使用中的差别,主要看你怎么用。对大多数普通用户来说,差距没想象中大;但如果你干的是专业活儿…

    2026年9月24日
    200
  • UC浏览器在线使用官方入口 UC浏览器最新官网

    UC浏览器官方入口是https://www.uc.cn/,该官网提供最新版下载及核心功能如智能搜索、流量压缩、视频优化和夜间模式,并支持跨平台使用与数据同步。 UC浏览器在线使用官方入口在哪里?这是不少用户关心的问题,接下来由PHP小编为大家带来UC浏览器最新官网地址以及相关功能特点,想要了解这款浏…

    2026年9月24日
    100
  • Laravel Blade中条件隐藏元素的优雅实践

    本文探讨了在Laravel Blade模板中如何高效地实现HTML元素的条件隐藏。针对传统@if-@else语句导致代码冗余的问题,教程提出使用Blade的内联三元运算符在style属性中动态控制display: none,从而避免重复代码,提升模板的可读性和维护性。此外,还将介绍如何利用CSS类和…

    2026年9月24日
    100
  • 如何在mysql中使用数值函数计算

    答案:MySQL数值函数用于执行数学运算,如ABS、ROUND、FLOOR、CEIL、MOD、POWER、SQRT等,可对数据直接计算。例如用ROUND四舍五入价格,TRUNCATE截断小数,FLOOR取整,MOD求余判断奇偶,SQRT开方,还可结合AVG、MAX等聚合函数使用,提升查询效率并减少应…

    2026年9月23日
    100
  • 悟空浏览器如何使用全局媒体控制器_悟空浏览器多媒体播放控制中心使用技巧

    1、确保悟空浏览器通知权限开启,以激活系统媒体控制;2、检查网站是否配置Media Session API,必要时注入脚本补充元数据与控制函数;3、结合画中画与后台播放功能,维持媒体会话活跃,实现锁屏或切换应用时的持续控制。 如果您在使用悟空浏览器播放网页媒体时,希望利用系统级的媒体控制功能来管理播…

    2026年9月23日
    100
  • VSCode 怎样通过插件实现代码的语法检查 VSCode 代码语法检查插件的使用方法​

    VSCode 怎样通过插件实现代码的语法检查 VSCode 代码语法检查插件的使用方法​VSCode 怎样通过插件实现代码的语法检查 VSCode 代码语法检查插件的使用方法​VSCode 怎样通过插件实现代码的语法检查 VSCode 代码语法检查插件的使用方法​VSCode 怎样通过插件实现代码的语法检查 VSCode 代码语法检查插件的使用方法​

    vscode实现代码语法检查的核心是安装对应语言的linter插件,如javascript使用eslint,python使用pylint或ruff;2. 安装后需在项目根目录创建配置文件(如.eslintrc.js或pyproject.toml)或调整vscode设置以启用保存时自动修复等功能;3.…

    2026年9月23日 用户投稿
    500
  • 抖音怎么保存视频?抖音视频保存不了

    抖音作为当下年轻人热衷的社交平台之一,已经成为记录生活、分享日常的重要工具。平台上的视频内容丰富多样,吸引了大量用户观看。然而,很多用户在欣赏完精彩视频后,却无法顺利将视频保存下来。本文将为您全面解析抖音视频的保存方法,帮助您轻松掌握技巧,留住每一个精彩瞬间。 一、抖音视频保存方式 1. 借助第三方…

    2026年9月23日
    300
  • 谷歌浏览器怎么关闭密码泄露检查_Chrome密码安全检查功能关闭教程

    关闭Chrome密码泄露警告的方法如下:1、进入设置→隐私设置和安全性→安全,关闭“当密码遭遇数据泄露时发送警告”;2、在安全检查中点击“您的密码”,选择“忽略此提醒”或删除风险密码;3、右键Chrome快捷方式,属性中目标末尾添加 –disable-password-leak-dete…

    2026年9月23日
    200
  • qq浏览器怎么管理所有已登录的设备_QQ浏览器账号登录设备管理方法

    1、打开QQ浏览器点击「我的」进入个人主页;2、点击头像进入「账号与安全」界面;3、查找并点击设备管理选项查看已登录设备列表,可识别并移除陌生设备以保障账号安全。 如果您在多个设备上登录了QQ浏览器账号,但无法查看或管理已登录的设备列表,可能会导致账号安全风险或同步异常。以下是管理QQ浏览器所有已登…

    2026年9月23日
    100
  • 一加R系列手机摄像头如何调整以拍出HDR视频?HDR视频的设置指南

    一加R系列手机摄像头如何调整以拍出HDR视频?HDR视频的设置指南一加R系列手机摄像头如何调整以拍出HDR视频?HDR视频的设置指南一加R系列手机摄像头如何调整以拍出HDR视频?HDR视频的设置指南一加R系列手机摄像头如何调整以拍出HDR视频?HDR视频的设置指南

    一加R系列拍摄HDR视频需开启相机中的HDR模式或选择4K等高分辨率视频模式,最佳光线为高对比度场景如日出日落,避免极暗或过亮环境,拍摄时启用防抖、使用三脚架以提升稳定性,并注意HDR视频具有更广动态范围和更高色深,但文件更大、对设备性能要求高,播放需支持HDR的设备以获得理想效果。 一加R系列手机…

    2026年9月23日 用户投稿
    300

发表回复

登录后才能评论
关注微信